Get document height (cross-browser)

06 Jan 2009

This function will return any document’s height. It’s been tested in IE6/7, FF2/3, Safari (Windows), Google Chrome and Opera 9.5. If the actual document’s body height is less than the viewport height then it will return the viewport height instead:

The Code:

function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

Usage:

alert( getDocHeight() );

Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!

So far there's been 10 Responses to
“Get document height (cross-browser)”

Joe McCann January 6th, 2009 at 4:27 pm

And for us jQuery junkies:

$.getDocHeight = function(){
     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));
};
 
alert( $.getDocHeight() );

James January 6th, 2009 at 8:18 pm

Actually in jQuery it’s a bit easier because it does most of the work for us:

$.getDocHeight = function(){
    return Math.max(
        $(document).height(),
        $(window).height(),
        /* For opera: */
        document.documentElement.clientHeight
    );
};

Dylan January 14th, 2009 at 5:40 pm

Any ideas how to get this into the css without flickering… (I believe the height is only known after the page has loaded)..

Nice code though, compliments, greets, Dylan

casper February 4th, 2009 at 3:46 pm

Excellent!!

Razvan February 11th, 2009 at 3:54 pm

Excellent !!! I call the function at the end of my html script and it works just fine. I have successfully tested also on Netscape 9 (Mozilla 5.0), even if I know it is at the end of his life.

Ben Walker February 19th, 2009 at 1:24 pm

Thanks, James. That’s a wonderfully helpful little snippet (especially in jQuery). It just solved an IE6 jqModal overlay nightmare for me.

😉

Richard Harris March 21st, 2009 at 8:30 pm

Great piece of code James – nice,simple and comprehensive. Thanks and loving your work!

Any reason you didn’t use ‘document.height’ tho?

James Schend May 15th, 2009 at 7:26 pm

You can pass as many values as you want into Math.max(). Try this:

var db = document.body;
var dde = document.documentElement;
 
var docHeight = Math.max(db.scrollHeight, dde.scrollHeight, db.offsetHeight, dde.offsetHeight, db.clientHeight, dde.clientHeight)

RP May 24th, 2009 at 9:54 pm

Thank you for posting this. Surely solves a lot of my presentation issues being able to resize the containers dynamically based on content.

CrAcKoFdAwN November 20th, 2009 at 12:17 am

Hi,
thx for this script! It works perfectly with IE 8 and Opera 10, but not with Firefox 3.5. It returns a height of about 30 pixels, even though the document’s height is 1000+ pixel.
Any idea?

Get document height (cross-browser)

The Code:

Usage:

So far there's been 10 Responses to “Get document height (cross-browser)”

So far there's been 10 Responses to
“Get document height (cross-browser)”