Height of a html window's content (not just the viewport height)

Posted by gatapia on Stack Overflow See other posts from Stack Overflow or by gatapia
Published on 2010-03-23T02:59:40Z Indexed on 2010/03/23 3:01 UTC
Read the original article Hit count: 610

Filed under:
|
|

Hi All,

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'>&nbsp;</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

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html