I'm trying to get the height of a html window's content. This is the full height of the content not the visible height. I have had some (very limited) success using:
document.getElementsByTagName('html')[0].offsetHeight in FireFox.
This however fails in IEs and it fails in Chrome when using absolute positioned elements ().
A sample html file that can be used to reproduce this is:
<html>
<head>
<style>
div {
border:solid 1px red;
height:2000px;
width:400px;
}
.broken {
position:absolute;
top:0;
left:0;
}
.fixed {
position:relative;
top:0;
left:0;
}
</style>
<script language='javascript'>
window.onload = function () {
document.getElementById('window.height').innerHTML = window.innerHeight;
document.getElementById('window.screen.height').innerHTML = window.screen.height;
document.getElementById('document.html.height').innerHTML = document.getElementsByTagName('html')[0].offsetHeight;
}
</script>
</head>
<body>
<div class='fixed'>
window.height: <span id='window.height'> </span> <br/>
window.screen.height: <span id='window.screen.height'></span> <br/>
document.html.height: <span id='document.html.height'></span> <br/>
</div>
</body>
</html>
Thanks All
Guido Tapia
I'm trying to get the height of a html window's content. This is the full height of the content not the visible height. I have had some (very limited) success using:
document.getElementsByTagName('html')[0].offsetHeight in FireFox.
This however fails in IEs and it fails in Chrome when using absolute positioned elements (http://code.google./p/chromium/issues/detail?id=38999).
A sample html file that can be used to reproduce this is:
<html>
<head>
<style>
div {
border:solid 1px red;
height:2000px;
width:400px;
}
.broken {
position:absolute;
top:0;
left:0;
}
.fixed {
position:relative;
top:0;
left:0;
}
</style>
<script language='javascript'>
window.onload = function () {
document.getElementById('window.height').innerHTML = window.innerHeight;
document.getElementById('window.screen.height').innerHTML = window.screen.height;
document.getElementById('document.html.height').innerHTML = document.getElementsByTagName('html')[0].offsetHeight;
}
</script>
</head>
<body>
<div class='fixed'>
window.height: <span id='window.height'> </span> <br/>
window.screen.height: <span id='window.screen.height'></span> <br/>
document.html.height: <span id='document.html.height'></span> <br/>
</div>
</body>
</html>
Thanks All
Guido Tapia
Share Improve this question asked Mar 23, 2010 at 2:59 gatapiagatapia 3,6625 gold badges42 silver badges51 bronze badges 3- I think document.documentElement.scrollHeight solves my problem. Still testing on all browsers but looks pretty reliable so far – gatapia Commented Mar 23, 2010 at 3:15
- IE is flaky with scrollHeight, according to quirksmode. But it might be subtle enough to ignore: quirksmode/dom/w3c_cssom.html#elementview – Anthony Commented Mar 23, 2010 at 3:20
- Hi Anthony, I'm doing testing and it appears to be fine for my purposes. I have tested Opera, Safari, Chrome, FF and IE8 and it appears to do what I want. – gatapia Commented Mar 23, 2010 at 3:23
2 Answers
Reset to default 7The best solution I found is:
document.documentElement.scrollHeight (scrollWidth for the width). Anthony above mentioned that this can have issues in IE quirks but this appears fine for my purposes.
Thanks
I seem to remember doing something like this before. To be clear, you want the height of the content that's below the scrollbar as well as what is on screen, right?
Have you tried using jquery? They have a built in method height() that will return the puted height of any DOM element. So to get the height of your document above and below the fold, you would use:
$(document).height();
To test it out, you could pare it to:
$("body").height();
One more quick plug for jquery: If you try to do this with straight JS, you'll run into issues with IE not supporting the same height properties as Firefox and Safari. So it not only make things more simple with jquery, but more cross-browser.