Visible and document height
Finding this information is not as easy as it should be. There is so much variation between browsers and it also depends on whether your HTML Doctype is strict or transitional.
Visible height
The amount of your web page the user can see without scrolling. Useful to know if you want to position an item that always appears at the bottom of the user’s browser.
Unfortunately, finding out such information is difficult. The best advice seems to be:
For HTML strict documents
PC IE 6 or Mac Firefox document.documentElement.clientHeight
Mac IE 5 document.getElementById(BodyID).height; document.getElementById(BodyID).clientHeight; document.body.scrollHeight; or document.body.clientHeight all achieve the same result
Safari document.clientHeight
For HTML transitional documents
PC IE 6, Mac IE 5, Mac Firefox document.getElementById(BodyID).clientHeight; or document.body.clientHeight
Safari document.clientHeight
Document height
Alternatively, you may need to find out the total height of the web page regardless of what happens to be visible, perhaps to set a bar down the side of the page to exactly the length it needs to be. Browsers are slightly more consistent this time, though you need to decide whether you wish to take the top margin into account, if relevant. In the above diagram the content is 4000px tall but a top margin of 16px means it doesn’t end until 4016px down the page.
For HTML strict documents
PC IE 6, Mac Firefox, Safari document.documentElement.scrollHeight gives the ideal position that takes margins into account (4016px in diagram)
Mac IE 5 None of the tests could determine the position. However, using the above setting is satisfactory as IE defaults to the bottom of the content minus margin anyway (4000px instead of 4016px)
For HTML transitional documents
Mac Firefox, Safari document.getElementById(BodyID).scrollHeight or document.body.scrollHeight (first one is standard and therefore best)
PC IE 6 As above, but the position is further down (4030px).
Mac IE 5 The above settings will position the box at the end of the visible area.
Settings tested
In researching this page, sixteen different methods of accessing visible or content height were tested. The results are shown in the table below for four browsers and two document types (strict and transitional). Test in your current browser
| Method of accessing position in JavaScript |
| document.
getElementById
(BodyID)
1 .scrollHeight
2 .height
3 .clientHeight
4 .innerHeight |
document
1 .scrollHeight
2 .height
3 .clientHeight
4 .innerHeight |
document.body
1 .scrollHeight
2 .height
3 .clientHeight
4 .innerHeight |
document.
documentElement
1 .scrollHeight
2 .height
3 .clientHeight
4 .innerHeight |
|
1 |
2 |
3 |
4 |
1 |
2 |
3 |
4 |
1 |
2 |
3 |
4 |
1 |
2 |
3 |
4 |
| Bottom of visible area. When a box is placed here it cannot be seen until the user scrolls at least 1px downwards. |
 |
|
|
|
|
|
 |
|
|
|
|
|
|
|
  |
|
| 4000px: bottom of content, but ignoring any top margin that may exist |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4016px: bottom of content, taking into account top margin |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4030px: bottom of content, taking into account top margin plus ? |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Key |
Internet Explorer 6 (PC, strict)
Internet Explorer 6 (PC, transitional)
Internet Explorer 5 (Mac, Doctype irrelavant)
Firefox (Mac, strict)
Firefox (Mac, transitional)
Safari (Mac, Doctype irrelavant)
|
| Undefined values are not shown, but boxes tend to default to 4000px, i.e. the bottom of content ignoring any top margin |
For a far more detailed (and complex) analysis, see this PDF of a Google newsgroup.