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.