Height of a html window's content (not just the viewport height)
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.com/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/>
开发者_如何学Python 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
The 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 computed 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 compare 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.
加载中,请稍侯......
精彩评论