最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Height of a html window's content (not just the viewport height) - Stack Overflow

programmeradmin6浏览0评论

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'>&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

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'>&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

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
Add a ment  | 

2 Answers 2

Reset to default 7

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 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.

发布评论

评论列表(0)

  1. 暂无评论