javascript document height complications

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. 开发者_如何学Python Chrome and Safari are still acting as they used to.

scrollHeight, and clientHeight are acting exactly the same.

To complicate 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.

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.compatMode!=='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)
    );
}