View Full Version : another document.body.scrollHeight issue

12-11-2010, 07:13 PM

thanks for reading, I have to admit, I'm a noob, but what my code does drives me nuts, eternal thanks to whoever tries to help me out!

In short my problem is that document.body.scrollHeight does not give me the correct pagesize combined with the viewport.
I just want the parts of the page to be as long as the (in the original dynamicly entered) text in the middle.

pageheight = (document.body.scrollHeight+viewportheight);
should give me the correct height of the page, but does not, why?
It works and it is close, but not completely, I tried stuff like document.body.offsetHeight etc., but my guess is I miss facturing in a parameter, but I have not the slightest clue which...

Here the page:

Here the JS Code:

<script type="text/javascript">
var viewportwidth;
var viewportheight;
var pageheight;

if (typeof window.innerWidth != 'undefined')
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight

else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight

viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight

pageheight = (document.body.scrollHeight+viewportheight);

document.write('<style type=text/css> div#linksaussen');
document.write('{width:468px; height:'+(pageheight-896)+'px; position:absolute; top:896px; left:'+(((viewportwidth-948)*0.5084)-468)+'px; background-image:url(./images/back_links.png);}');
document.write('div#linksaussen1 {width:468px; height:897px; position:absolute; top:0px; left:'+(((viewportwidth-948)*0.5084)-468)+'px; background-image:url(./images/testlinks.png);}');
document.write('div#mitte {width:948px; height:'+pageheight+'px; position:absolute; top:0px; left:'+((viewportwidth-948)*0.5084)+'px; background-color:#FF0000;}');
document.write ('div#rechtsaussen1');
document.write ('{width:'+((viewportwidth-948)*0.4916)+'px; height:897px; position:absolute; top:0px; left:'+(948+((viewportwidth-948)/2))+'px; background-image:url(./images/testrechts.png); background-repeat:no-repeat;}');
document.write ('div#rechtsaussen');
document.write ('{width:'+((viewportwidth-948)*0.4916)+'px; height:'+(pageheight-896)+'px; position:absolute; top:896px; left:'+(948+((viewportwidth-948)/2))+'px; background-image:url(./images/back_rechts.png);}</style>');
alert (viewportwidth+'vpw'+viewportheight+'vph'+pageheight+'pgh')


Again please forgive my noobishness, my bad english and thanks again for any hint!

12-17-2010, 01:04 AM
Please guys any hint is appreciated, do I do something wrong, did I ask wrong, is it impossible, is there a book link newspaper article ANYthing that could help me? How would you tackle the problem?

Old Pedant
12-17-2010, 11:52 PM
I'm sorry, but that doesn't make sense, to me.

document.body.scrollHeight *IS* the pageHeight. That is, it's the number of pixels from the top of the <body> to the bottom of the </body>.

Why would you then ADD ON the height of the window???

== visible part of body, in the window

more body, only visible by scrolling down


So the measurement from <body> to </body> is the body.scrollHeight.

The measurement of the part that is visible, where the == are, is the window.innerHeight, what you are calling viewportHeight.

Maybe if you told us what you are trying to *DO*, instead of showing code that doesn't seem to work, that would help??

Old Pedant
12-18-2010, 12:23 AM
Here...try this demonstration:

<script type="text/javascript">
function addOne( )
var div = document.createElement("div");
div.innerHTML = "This div added when document.body.scrollHeight was "
+ document.body.scrollHeight + "pixels";
document.body.appendChild( div );
<style type="text/css">
div {
border: solid blue 3px;
background-color: lightblue;
padding: 20px;
margin: 5px;
<body onload="setInterval(addOne,3000)">
This is the original content on the page.