views:

767

answers:

3

Assume an HTML page:

<html>
  <body>
     .. html content (outside of our control) ..
     .. javascript block ..
     .. some more html content (outside of our control) ..
  </body>
</html>

Assume further that the only part of the HTML page that we're able to control is a javascript block in the middle of the page.

Using that javascript block, how do I increase the total page height by 150 pixels by "padding" the bottom of the page?

If I could alter the HTML a simple solution would be:

<html>
  <body>
     .. html content (outside of our control) ..
     .. javascript block ..
     .. some more html content (outside of our control) ..
     <div style="height: 150px; clear: both;"></div>
  </body>
</html>

But how do I achieve this only by using the javascript block?

The ideal solution should be cross-browser compatible and 100 % inline (that is using no javascript library).

Update #1: The javascript block has access to the entire DOM of the page.

Update #2: The total length of the page (before altering the DOM) varies.

Update #3: Assume that no javascript library (such as the otherwise excellent jQuery) can be used.

+1  A: 

Can you generate DOM elements via javascript and simply add that div to the bottom?

I'd vote for cobbal If I had any rep.. heh.

Dzejms
+4  A: 

Updated code:

var space = document.createElement('div');
space.style.height = "150px";
space.style.clear = "both";
document.getElementsByTagName("body")[0].appendChild(space);
cobbal
Thanks - I've clarified the question. Please see update #2.
knorv
This should work no matter what the length of the page is. I'm out of votes, or I'd vote it up. I was about to post basically the same thing.
zombat
the original code only produced an absolute height, this is the updated version
cobbal
A: 

$('body').append($('<div style="height: 150px; clear: both;"></div>'));

maybe

John Boker