2

I have an external script that is used on some sites The script is trying to calculate the height of the whole HTML page (not just the visible part..)

everything is OK except one strange case - some sites use body { height:100% }. When the JavaScript is trying to calculate the height of the whole page it is returning only the visible height.

I used: 

document.body.scrollHeight

tested on Chrome & Firefox

thirtydot
  • 224,678
  • 48
  • 389
  • 349
gmadar
  • 1,884
  • 3
  • 19
  • 22
  • If you can use jQuery, I would give this the [jQuery height()](http://api.jquery.com/height/) function a shot. – Allen Liu Sep 13 '11 at 07:41

2 Answers2

6

found the answere:

var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, 
                   html.clientHeight, html.scrollHeight, html.offsetHeight );

jQuery is not an option since other sites use my script and I cannot tell them to use jQuery

gmadar
  • 1,884
  • 3
  • 19
  • 22
  • Nice. You answered your own question =) – Allen Liu Sep 13 '11 at 07:51
  • actually I found the answere in here:http://stackoverflow.com/questions/1145850/get-height-of-entire-document-with-javascript – gmadar Sep 13 '11 at 07:54
  • 1
    This saved me by allowing me to hack up a fix for Firefox and Bootstrap scrollspy. We have a design that uses body: 100% and FF shows the scrollHeight as 0. What a nightmare... thanks!! – James Polanco Feb 27 '13 at 19:09
0

It really depends on what element you are trying to calculate the height.

If the html element is set to have a height of 100%, it will be the height of the browser window. Then the body may be higher than that because of some content, but the height of the html element won't change, it will remain the same.

So it really depends on which element in the page is causing the content to increasing the height. You should measure the height of that element then, but how can you know which element is it?

Check this example.

Jose Faeti
  • 12,126
  • 5
  • 38
  • 52