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

【问题标题】：Height of a html window's content (not just the viewport height)html 窗口内容的高度（不仅仅是视口高度）
【发布时间】：2010-03-23 02:59:40
【问题描述】：

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

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

可用于重现此内容的示例 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>

谢谢大家

吉多·塔皮亚

【问题讨论】：

我认为 document.documentElement.scrollHeight 解决了我的问题。仍在所有浏览器上进行测试，但到目前为止看起来相当可靠
根据 quirksmode，IE 的 scrollHeight 很不稳定。但这可能很微妙，可以忽略：quirksmode.org/dom/w3c_cssom.html#elementview
嗨 Anthony，我正在做测试，它似乎适合我的目的。我已经测试过 Opera、Safari、Chrome、FF 和 IE8，它似乎可以满足我的要求。

标签： javascript html css

【解决方案1】：

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

document.documentElement.scrollHeight（宽度为scrollWidth）。上面的 Anthony 提到这可能会在 IE 怪癖中出现问题，但这对于我的目的来说似乎很好。

谢谢

【讨论】：

【解决方案2】：

我似乎记得以前做过这样的事情。明确地说，您想要滚动条下方内容的高度以及屏幕上的内容，对吗？

您是否尝试过使用 jquery？他们有一个内置的方法height()，它将返回任何DOM元素的计算高度。因此，要获得折叠上方和下方的文档高度，您可以使用：

$(document).height();

要对其进行测试，您可以将其与以下内容进行比较：

$("body").height();

jquery 的另一个快速插件：如果您尝试使用直接 JS 执行此操作，您将遇到 IE 不支持与 Firefox 和 Safari 相同的高度属性的问题。所以它不仅让 jquery 更简单，而且更能跨浏览器。

【讨论】：

遗憾的是，jQuery 不是一个选项
这太糟糕了。为什么不呢，请问？
这是一个客户端脚本（公开可用 - 请参阅 picnet.com.au/met）。它是一种分析产品，我不能通过添加 jQuery 来膨胀客户端的脚本。我当然可以从库中抓取目标代码，但这需要一段时间，而且我真的想要一个干净的 html/js 实现。
使用 ~8kb 脚本使其膨胀？
为单个任务添加约 8kb 的代码和未知漏洞，您可以使用约 100b 的代码完成？