How to get height of entire document with JavaScript?

Question

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.

$(document) is null because that site doesn't have jQuery loaded... — James, Commented Jul 17, 2009 at 21:57
Hm, could have sworn I checked something else to confirm jQuery was registered but it doesn't look like I did, HA! I thought firebug had jQuery packaged... hm, I guess I will check this out then if it's a solution. — Nic, Commented Jul 17, 2009 at 22:04
See Finding the size of the browser window. It has a great table of the behaviors of different browsers. — Oriol, Commented Jun 30, 2015 at 23:56

Community · Accepted Answer · 2017-05-23 12:34:38Z

792

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.

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Jul 18, 2009 at 15:11

Borgar

38.4k5 gold badges42 silver badges42 bronze badges

2

rate this solution, because it works when you are using prototype library, with jQuery there is no such issue
– se_pavel
Commented Sep 29, 2009 at 18:28
11

When working with iframes and jquery, because of this method of calculation, the iframe's document height will allways be at least the height of the iframe itselft. This is important to note when you want to reduce the iframe's height to match the content. You first have to reset the height of the iframe.
– David Lay
Commented Nov 30, 2009 at 13:35
3

I had the need to grow the iframe and shrink it (facebook app) and found that document.body.offsetHeight was the best choice for me, accurately supported by the most browsers.
– ElJeffe
Commented Aug 3, 2012 at 1:04
1

This is great although can give incorrect results if the document is not ready - ie, when used in server generated code...
– stuartdotnet
Commented Oct 2, 2012 at 3:51
1

Testing the document before it is ready won't work. This has nothing to do with generated code/documents but rather how the document is loaded. The test must run after the document is ready, and I would suggest running it only when the document is fully loaded as remaining items may affect the height, also resizing the browser.
– Borgar
Commented Dec 5, 2012 at 13:02

| Show 10 more comments

GKFX · Accepted Answer · 2020-07-04 19:02:41Z

449

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

Answer for 2020:

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

edited Jul 4, 2020 at 19:02

GKFX

1,4051 gold badge12 silver badges30 bronze badges

answered May 19, 2017 at 19:33

M -

28.1k12 gold badges51 silver badges87 bronze badges

16

As of 2017 this should be marked as the right answer to me.
– Joan
Commented Jul 7, 2017 at 9:43
@Joan That's up to the original poster to decide :)
– M -
Commented Jul 7, 2017 at 18:06
2

Doesn't work in presence of margins. document.documentElement.getBoundingClientRect() works better.
– torvin
Commented Nov 18, 2017 at 4:20
14

There is one error with this: Say for example that there is an <h1> element at the start of the <body> with it's default margin, it will push the <body> element down without a way to detect it. document.documentElement.scrollHeight (not document.body,scrollHeight) is the most accurate way of doing things. This works with both body margins and margins of stuff inside the body pushing it downwards.
– Ethan
Commented Feb 13, 2018 at 8:25
window.innerHeight appears to be identical to document.documentElement.scrollHeight, based on tests I just made in Chrome and Firefox. They both represent the full available height within the browser window. If you want to calculate the actual height available within the body, you must subtract the body element's top and bottom margins and/or padding (an 8px margin seems to be standard on body). Note: body might not be the full available height, so document.body.scrollHeight is not reliable. But that's not the document height, it's available height of the visible area.
– Sideways S
Commented Nov 6, 2023 at 21:21

Add a comment |

Andrii Verbytskyi · Accepted Answer · 2018-04-06 15:34:21Z

33

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!

edited Apr 6, 2018 at 15:34

answered Dec 16, 2016 at 9:23

Andrii Verbytskyi

7,4913 gold badges48 silver badges40 bronze badges

3

This worked like a charm! No other answer here works to get the full height (including scrollable area), they all return only height of visible area.
– Martin Kristiansson
Commented Apr 27, 2017 at 13:14
Really exceptional, never thought of this. Only one working in phantomjs I suppose.
– DifferentPseudonym
Commented May 25, 2018 at 18:21
here is a problem, we can find the highest node, but this can be some div with their custom scroll implementation, and we will have the div height as a max, but not the entire page content height
– Alex
Commented Apr 25 at 5:46

Add a comment |

JRodDynamite · Accepted Answer · 2016-04-10 06:21:53Z

30

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())

edited Apr 10, 2016 at 6:21

JRodDynamite

12.6k5 gold badges45 silver badges65 bronze badges

answered Feb 7, 2013 at 5:37

Mimo

6,0657 gold badges37 silver badges46 bronze badges

Add a comment |

torvin · Accepted Answer · 2017-11-18 04:18:59Z

7

The proper answer for 2017 is:

document.documentElement.getBoundingClientRect().height

Unlike document.body.scrollHeight this method accounts for body margins. It also gives fractional height value, which can be useful in some cases

answered Nov 18, 2017 at 4:18

torvin

6,9133 gold badges38 silver badges53 bronze badges

1

These are the results I get when I try your method on this page: i.imgur.com/0psVkIk.png Your method returns something that looks like the window height, while document.body.scrollHeight lists the entire scrollable height, which is what the original question asked.
– M -
Commented Nov 22, 2017 at 22:05
3

@Marquizzo that's because this page has html { height: 100% } in css. So the API correctly returns the real calculated height. Try removing this style and also adding margins to body and you will see what's the problem with using document.body.scrollHeight.
– torvin
Commented Nov 22, 2017 at 23:31
There is one error with this: Say for example that there is an <h1> element at the start of the <body> with it's default margin, it will push the <body> element down without a way to detect it. document.documentElement.scrollHeight (not document.body,scrollHeight) is the most accurate way of doing things.
– Ethan
Commented Feb 13, 2018 at 8:23
@Booligoosh not sure what you mean. documentElement.scrollHeight gives a wrong value in this case. documentElement.getBoundingClientRect().height gives the correct one. check this out: jsfiddle.net/fLpqjsxd
– torvin
Commented Feb 13, 2018 at 22:57
2

@torvin Fact remains that not the intended result is returned by getBoundingClientRect().height. It gets sidetracked, while 3 (three) other methods don't get sidetracked. Including the one that you mention as inferior to it. And you insist on doing so by suggesting to remove 100% from this page's html height, and adding margins to it. What's the point ? Just accept that getBoundingClientRect().height is also not bullet-proof.
– Rob Waa
Commented May 30, 2019 at 21:15

| Show 7 more comments

hashchange · Accepted Answer · 2015-03-05 16:23:12Z

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.

Nic · Accepted Answer · 2009-07-17 22:08:49Z

5

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

answered Jul 17, 2009 at 22:08

Nic

4,7313 gold badges20 silver badges12 bronze badges

2

Different browsers bro.
– jahrichie
Commented Feb 25, 2015 at 2:37

Add a comment |

HumanInDisguise · Accepted Answer · 2019-03-29 22:38:50Z

3

To get the width in a cross browser/device way use:

function getActualWidth() {
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||
                      document.body.offsetWidth;

    return actualWidth;
}

edited Mar 29, 2019 at 22:38

HumanInDisguise

1,4154 gold badges19 silver badges29 bronze badges

answered Mar 5, 2015 at 15:50

user937284

2,6046 gold badges26 silver badges30 bronze badges

13

we are talking about height. not width.
– Yash
Commented Oct 15, 2015 at 20:28

Add a comment |

willy wonka · Accepted Answer · 2017-03-14 12:48:48Z

This cross browser code below evaluates all possible heights of the body and html elements and returns the max found:

            var body = document.body;
            var html = document.documentElement;
            var bodyH = Math.max(body.scrollHeight, body.offsetHeight, body.getBoundingClientRect().height, html.clientHeight, html.scrollHeight, html.offsetHeight); // The max height of the body

A working example:

function getHeight()
{
  var body = document.body;
  var html = document.documentElement; 
  var bodyH = Math.max(body.scrollHeight, body.offsetHeight, body.getBoundingClientRect().height, html.clientHeight, html.scrollHeight, html.offsetHeight);
  return bodyH;
}

document.getElementById('height').innerText = getHeight();

body,html
{
  height: 3000px;
}

#posbtm
{
  bottom: 0;
  position: fixed;
  background-color: Yellow;
}

<div id="posbtm">The max Height of this document is: <span id="height"></span> px</div>

example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />

Please explicate the motivation in case of downvoting so I can correct the point. Thanks very much — willy wonka, Commented Mar 14, 2017 at 14:30

Y.K. · Accepted Answer · 2020-05-22 14:33:03Z

For anyone having trouble scrolling a page on demand, using feature detection, I've come up with this hack to detect which feature to use in an animated scroll.

The issue was both document.body.scrollTop and document.documentElement always returned true in all browsers.

However you can only actually scroll a document with either one or the other. d.body.scrollTop for Safari and document.documentElement for all others according to w3schools (see examples)

element.scrollTop works in all browsers, not so for document level.

    // get and test orig scroll pos in Saf and similar 
    var ORG = d.body.scrollTop; 

    // increment by 1 pixel
    d.body.scrollTop += 1;

    // get new scroll pos in Saf and similar 
    var NEW = d.body.scrollTop;

    if(ORG == NEW){
        // no change, try scroll up instead
        ORG = d.body.scrollTop;
        d.body.scrollTop -= 1;
        NEW = d.body.scrollTop;

        if(ORG == NEW){
            // still no change, use document.documentElement
            cont = dd;
        } else {
            // we measured movement, use document.body
            cont = d.body;
        }
    } else {
        // we measured movement, use document.body
        cont = d.body;
    }

ali bagheri · Accepted Answer · 2015-05-30 17:24:25Z

-1

use blow code for compute height + scroll

var dif = document.documentElement.scrollHeight - document.documentElement.clientHeight;

var height = dif + document.documentElement.scrollHeight +"px";

answered May 30, 2015 at 17:24

ali bagheri

1492 silver badges5 bronze badges

Add a comment |

IAmInPLS · Accepted Answer · 2016-06-02 08:41:03Z

-4

Add References properly

In my case I was using a ASCX page and the aspx page that contains the ascx control is not using the references properly. I just pasted the following code and it worked :

<script src="../js/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script src="../js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../js/jquery-1.5.1.js" type="text/javascript"></script>

edited Jun 2, 2016 at 8:41

IAmInPLS

4,1094 gold badges27 silver badges60 bronze badges

answered Mar 17, 2014 at 19:37

Tosh

5317 silver badges3 bronze badges

Add a comment |

jedihawk · Accepted Answer · 2009-07-17 22:02:12Z

-5

I don't know about determining height just now, but you can use this to put something on the bottom:

<html>
<head>
<title>CSS bottom test</title>
<style>
.bottom {
  position: absolute;
  bottom: 1em;
  left: 1em;
}
</style>
</head>

<body>

<p>regular body stuff.</p>

<div class='bottom'>on the bottom</div>

</body>
</html>

answered Jul 17, 2009 at 22:02

jedihawk

8141 gold badge12 silver badges12 bronze badges

1

Trust me, I have exhausted HTML and CSS resources on this one. Can't explain it but you will see the issues if you try this on those sites.
– Nic
Commented Jul 17, 2009 at 22:09

Add a comment |

Collectives™ on Stack Overflow

How to get height of entire document with JavaScript?

13 Answers 13

A working example:

Not the answer you're looking for? Browse other questions tagged
javascript
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

A working example:

Not the answer you're looking for? Browse other questions tagged javascript or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
javascript
or ask your own question.