Mozilla & IE developers seem to have simultaneously changed the implementation of their height elements to represent the Opera implementation... which I previously did not have to worry about.

var height = (document.height !== undefined) ? document.height : document.body.offsetHeight;

When performed on a blank document now returns 0 as the height of the document. My implementation requires knowing the true client viewport to dynamically build on. Chrome and Safari are still acting as they used to.

scrollHeight, and clientHeight are acting exactly the same.

To plicate matters document.height and document.body.offsetHeight are now also taking the full height of the document into account instead of only the viewable area as they used to... I tried an old table spacing method and used a 2000px x 1px transparent andthe document height is set to 2000 now.... naturally Chrome and Safari still work as expected and only give the viewable size.

I am very desperate to fix this issue.

Mozilla & IE developers seem to have simultaneously changed the implementation of their height elements to represent the Opera implementation... which I previously did not have to worry about.

var height = (document.height !== undefined) ? document.height : document.body.offsetHeight;

When performed on a blank document now returns 0 as the height of the document. My implementation requires knowing the true client viewport to dynamically build on. Chrome and Safari are still acting as they used to.

scrollHeight, and clientHeight are acting exactly the same.

To plicate matters document.height and document.body.offsetHeight are now also taking the full height of the document into account instead of only the viewable area as they used to... I tried an old table spacing method and used a 2000px x 1px transparent andthe document height is set to 2000 now.... naturally Chrome and Safari still work as expected and only give the viewable size.

I am very desperate to fix this issue.

• javascript
• javascript-objects

Share Improve this question Follow edited May 27, 2016 at 17:15 Sebas 21.6k99 gold badges6060 silver badges109109 bronze badges asked Jan 28, 2010 at 19:57 DavidDavid 1311 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The viewport height is not a property of the document, but of the window viewing it. You get the viewport height from window.innerHeight.

The stuff with document is only needed as a fallback for IE, which doesn't provide the window.inner dimensions. IE (technically incorrectly) makes the document.documentElement represent the viewport, so you can get the height from its clientHeight, unless you're in Quirks Mode which (more incorrectly) makes document.body represent the viewport instead. (document.height is totally non-standard; avoid it.)

So in summary, and assuming you need to support Quirks Mode (let's hope you don't):

var height= (
    'innerHeight' in window? window.innerHeight :
    document.patMode!=='BackCompat'? document.documentElement.clientHeight :
    document.body.clientHeight
);

I use this, that I got from James Paldosey's site:

function getDocHeight() {
    //utility function to find dimensions of page
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}