Home/ Questions/Q 198525
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T16:56:42+00:00

Assume an HTML page: <html> <body> .. html content (outside of our control) ..

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Updated code:

    var space = document.createElement('div');
space.style.height = "150px";
space.style.clear = "both";
document.getElementsByTagName("body")[0].appendChild(space);
    • 0