Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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 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.
–
–
–
–
–
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
–
–
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!
–
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())
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.
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
–
–
–
–
–
function getActualWidth() {
var actualWidth = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth ||
document.body.offsetWidth;
return actualWidth;
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 />
–
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;
use blow code for compute height + scroll
var dif = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var height = dif + document.documentElement.scrollHeight +"px";
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>
I don't know about determining height just now, but you can use this to put something on the bottom:
<title>CSS bottom test</title>
<style>
.bottom {
position: absolute;
bottom: 1em;
left: 1em;
</style>
</head>
<p>regular body stuff.</p>
<div class='bottom'>on the bottom</div>
</body>
</html>
–
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
