How to get height of entire document with JavaScript?
JavascriptJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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 - Javascript
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
Solution 3 - Javascript
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 - Javascript
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 - Javascript
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 - Javascript
I lied, jQuery returns the correct value for both pages $(document).height();... why did I ever doubt it?
Solution 7 - Javascript
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
Solution 8 - Javascript
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;
}
Solution 9 - Javascript
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;
}
Solution 10 - Javascript
use blow code for compute height + scroll
var dif = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var height = dif + document.documentElement.scrollHeight +"px";
Solution 11 - Javascript
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 />
Solution 12 - Javascript
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>
Solution 13 - Javascript
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>