javascript - 如何使用 JavaScript 获取整个文档的高度？

Question

某些文档我无法获得文档的高度(将某些东西绝对定位在最底部)。此外，padding-bottom on 似乎在这些页面上没有任何作用，但在高度将返回的页面上起作用。案例:

http://fandango.com
http://paperbackswap.com

在范丹戈
jQuery 的 $(document).height(); 返回正确的值
document.height 返回 0
document.body.scrollHeight 返回 0

关于平装书交换:
jQuery 的 $(document).height(); TypeError: $(document) is null
document.height 返回不正确的值
document.body.scrollHeight 返回不正确的值

注意:我有浏览器级别的权限，如果那里有什么技巧的话。

Answer 1

文档大小是浏览器兼容性的噩梦，因为尽管所有浏览器都公开了 clientHeight 和 scrollHeight 属性，但它们并不都同意这些值的计算方式。

对于如何测试正确的高度/宽度，过去有一个复杂的最佳实践公式。这涉及使用 document.documentElement 属性(如果可用)或使用文档属性等。

获取正确高度的最简单方法是获取在文档或 documentElement 上找到的所有高度值，并使用最高的值。这基本上就是 jQuery 所做的:

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

使用 Firebug 进行快速测试 + jQuery bookmarklet返回两个引用页面的正确高度，代码示例也是如此。

请注意，在文档准备好之前测试文档的高度总是会导致 0。此外，如果您加载了更多内容，或者用户调整了窗口大小，您可能需要重新测试。使用 onload 或 document ready如果您在加载时需要此事件，则事件，否则只需在需要数字时进行测试。