How to get height of entire document with JavaScript?

How to get height of entire document with JavaScript?

Some documents I can’t get the height of the document (to position something absolutely at the very bottom). Additionally, a padding-bottom on seems to do nothing on these pages, but do on the pages where height will return. Case(s) in point:
http://fandango.com
http://paperbackswap.com
On Fandango
jQuery’s $(document).height(); returns correct value
document.height returns 0
document.body.scrollHeight returns 0
On Paperback Swap:
jQuery’s $(document).height(); TypeError: $(document) is null
document.height returns an incorrect value
document.body.scrollHeight returns an incorrect value
Note: I have browser level permissions, if there is some trick there.

Solutions/Answers:

Solution 1:

Document sizes are a browser compatibility nightmare because, although all browsers expose clientHeight and scrollHeight properties, they don’t all agree how the values are calculated.

There used to be a complex best-practice formula around for how you tested for correct height/width. This involved using document.documentElement properties if available or falling back on document properties and so on.

The simplest way to get correct height is to get all height values found on document, or documentElement, and use the highest one. This is basically what jQuery does:

var body = document.body,
    html = document.documentElement;

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

A quick test with Firebug + jQuery bookmarklet returns the correct height for both cited pages, and so does the code example.

Note that testing the height of the document before the document is ready will always result in a 0. Also, if you load more stuff in, or the user resizes the window, you may need to re-test. Use onload or a document ready event if you need this at load time, otherwise just test whenever you need the number.

Solution 2:

This is a really old question, and thus, has many outdated answers. As of 2017 all browsers have adhered to the standard.

Answer for 2017:

document.body.scrollHeight

Edit: the above doesn’t take margins on the <body> tag into account. If your body has margins, use:

document.documentElement.scrollHeight

Solution 3:

You can even use this:

var B = document.body,
    H = document.documentElement,
    height

if (typeof document.height !== 'undefined') {
    height = document.height // For webkit browsers
} else {
    height = Math.max( B.scrollHeight, B.offsetHeight,H.clientHeight, H.scrollHeight, H.offsetHeight );
}

or in a more jQuery way (since as you said jQuery doesn’t lie) 🙂

Math.max($(document).height(), $(window).height())

Solution 4:

Full Document height calculation:

To be more generic and find the height of any document you could just find the highest DOM Node on current page with a simple recursion:

;(function() {
    var pageHeight = 0;

    function findHighestNode(nodesList) {
        for (var i = nodesList.length - 1; i >= 0; i--) {
            if (nodesList[i].scrollHeight && nodesList[i].clientHeight) {
                var elHeight = Math.max(nodesList[i].scrollHeight, nodesList[i].clientHeight);
                pageHeight = Math.max(elHeight, pageHeight);
            }
            if (nodesList[i].childNodes.length) findHighestNode(nodesList[i].childNodes);
        }
    }

    findHighestNode(document.documentElement.childNodes);

    // The entire page height is found
    console.log('Page height is', pageHeight);
})();

You can Test it on your sample sites (http://fandango.com/ or http://paperbackswap.com/) with pasting this script to a DevTools Console.

NOTE: it is working with Iframes.

Enjoy!

Solution 5:

The “jQuery method” of determining the document size – query everything, take the highest value, and hope for the best – works in most cases, but not in all of them .

If you really need bullet-proof results for the document size, I’d suggest you use my jQuery.documentSize plugin. Unlike the other methods, it actually tests and evaluates browser behaviour when it is loaded and, based on the result, queries the right property from there on out.

The impact of this one-time test on performance is minimal, and the plugin returns the right results in even the weirdest scenarios – not because I say so, but because a massive, auto-generated test suite actually verifies that it does.

Because the plugin is written in vanilla Javascript, you can use it without jQuery, too.

Solution 6:

I lied, jQuery returns the correct value for both pages $(document).height();… why did I ever doubt it?