Get page height in JS (Cross-Browser)

Question

What is the best way to get the actual page (not window) height in JS that is cross-browser compatible?

I've seen a few ways but they all return different values...

self.innerHeight or document.documentElement.clientHeight or document.body.clientHeight or something else?

One way of doing it which seems to work is :

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

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

possible duplicate of [Get height of entire document with JavaScript](http://stackoverflow.com/questions/1145850/get-height-of-entire-document-with-javascript) — Felix Kling, Feb 24 '12 at 11:38
Do you have the ability of using jquery? If so, this answer here might do you some good: http://stackoverflow.com/a/1304384/104435 — soniiic, Feb 24 '12 at 11:37
I'm looking for pure JS solution. Thanks for the suggestion anyway! — Boris Bachovski, Feb 24 '12 at 11:39

Krilivye · Answer 1 · 2012-02-24T12:25:20.023

Page/Document height is currently subject to vendor (IE/Moz/Apple/...) implementation and does not have a standard and consistent result cross-browser.

Looking at JQuery .height() method;

if ( jQuery.isWindow( elem ) ) {
            // Everyone else use document.documentElement or document.body depending on Quirks vs Standards mode
            // 3rd condition allows Nokia support, as it supports the docElem prop but not CSS1Compat
            var docElemProp = elem.document.documentElement[ "client" + name ],
                body = elem.document.body;
            return elem.document.compatMode === "CSS1Compat" && docElemProp ||
                body && body[ "client" + name ] || docElemProp;

        // Get document width or height
        } else if ( elem.nodeType === 9 ) {
            // Either scroll[Width/Height] or offset[Width/Height], whichever is greater
            return Math.max(
                elem.documentElement["client" + name],
                elem.body["scroll" + name], elem.documentElement["scroll" + name],
                elem.body["offset" + name], elem.documentElement["offset" + name]
            );

nodeType === 9 mean DOCUMENT_NODE : http://www.javascriptkit.com/domref/nodetype.shtml so no JQuery code solution should looks like:

var height = Math.max(
                    elem.documentElement.clientHeight,
                    elem.body.scrollHeight, elem.documentElement.scrollHeight,
                    elem.body.offsetHeight, elem.documentElement.offsetHeight)

You are posting the same answer like Amar. Can you please run that code in firebug, alert the height and tell me if the result is correct? — Boris Bachovski, Feb 24 '12 at 12:23
Amar solution and previously mine apply to "window" browser object. — Krilivye, Feb 24 '12 at 12:27

score 1 · Answer 2 · answered Feb 24 '12 at 12:04

1

var width = window.innerWidth ||
            html.clientWidth  ||
            body.clientWidth  ||
            screen.availWidth;

var height = window.innerHeight ||
             html.clientHeight  ||
             body.clientHeight  ||
             screen.availHeight;

Should be a nice & clean way to accomplish it.

answered Feb 24 '12 at 12:04

Jonas

44
3

Doesn't work either... The only solution that I've found so far and it works correctly is the one that's in my question. – Boris Bachovski Feb 24 '12 at 12:13
Well, I don't know how you are testing it... but I ran this in all major browser's (Chrome, Firefox, Opera, IE9+) js console, and it works perfectly fine. – Jonas Feb 24 '12 at 12:23
1

ty for non-jquery solution – Matej Sep 16 '14 at 09:55

score 0 · Answer 3 · answered Feb 24 '12 at 11:39

0

Try this without jQuery

//Get height
var myWidth = 0, myHeight = 0;
if (typeof (window.innerWidth) == 'number') {
    myWidth = window.innerWidth; 
    myHeight = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
    myWidth = document.documentElement.clientWidth; 
    myHeight = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
   myWidth = document.body.clientWidth; 
   myHeight = document.body.clientHeight;
}

Hope this helps you.

answered Feb 24 '12 at 11:39

Amar Palsapure

9,590
1
27
46

Tried that just now in firebug on this particular page returns 456px height which is incorrect... – Boris Bachovski Feb 24 '12 at 11:44
@e-bacho2.0 Try again, and pop out your firebug window. I'm getting same value as `$(window).height();` <= this is jQuery (and which is correct) `705` in both the cases. – Amar Palsapure Feb 24 '12 at 11:48

Get page height in JS (Cross-Browser)

3 Answers3

Linked