Question

我正在尝试获取html窗口内容的高度。这是内容的全高，而不是可见高度。我有一些（非常有限的）成功使用： FireFox中的document.getElementsByTagName('html')[0].offsetHeight。

然而，这在IE中失败，并且在使用绝对定位元素（http://code.google.com/p/chromium/issues/detail?id=38999）时在Chrome中失败。

可用于重现此内容的示例html文件是：

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

全部谢谢

Guido Tapia

Answer 1

我找到的最佳解决方案是：

document.documentElement.scrollHeight（宽度为scrollWidth）。安东尼上面提到过，这可能会在IE怪癖中出现问题，但这对我来说似乎没问题。

由于

Answer 2

我似乎记得以前做过这样的事情。要清楚，您需要滚动条下方内容的高度以及屏幕上的内容，对吧？

你尝试过使用jquery吗？它们有一个内置方法height()，它将返回任何DOM元素的计算高度。因此，为了使文档的高度高于和低于折叠，您可以使用：

$(document).height();

要测试它，你可以将它与：

进行比较

$("body").height();

jquery的另一个快速插件：如果你尝试用直接的JS做这个，你会遇到IE不支持与Firefox和Safari相同的高度属性的问题。所以它不仅使jquery更简单，而且更加跨浏览器。

html窗口内容的高度（不仅仅是视口高度）

2 个答案: