views:

107

answers:

2

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

A: 

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.

Anthony
jQuery is unfortunately not an option
gatapia
That's a bummer. Why not, may I ask?
Anthony
This is a client script (publicaly available - see http://www.picnet.com.au/met). Its kind of an analytics product and I cannot go bloating the client's script by adding jQuery. I could offcourse scrape the target code out of the library, but this would take a while, and I'd really like a clean html/js implementation.
gatapia
Bloating it with a ~8kb script?
Kevin
A: 

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

gatapia