有些文件我无法获得文件的高度(绝对位于最底层).此外,填充底部似乎在这些页面上什么也不做,但在高度将返回的页面上执行.案例:

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

在Fandango上
jQuery的$(document).height();返回正确值
document.height返回0
document.body.scrollHeight返回0

On Paperback Swap:
jQuery的$(document).height();TypeError:$(document)为null
document.height返回不正确的值
document.body.scrollHeight返回不正确的值

注意:如果有一些技巧,我有浏览器级权限.

1> Borgar..：

---

文档大小是浏览器兼容性的噩梦,因为尽管所有浏览器都公开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或文档就绪事件,否则只需在需要时进行测试.

---

使用iframe和jquery时,由于这种计算方法,iframe的文档高度将始终至少为iframe itselft的高度.当您想要降低iframe的高度以匹配内容时,请务必注意这一点.首先必须重置iframe的高度.

---

我需要增加iframe并缩小它(Facebook应用程序)并发现document.body.offsetHeight是我的最佳选择,大多数浏览器都准确支持.

---

对这个解决方案进行评分，因为它在您使用原型库时有效，而使用jQuery则没有此类问题

2> Marquizzo..：

---

这是一个非常古老的问题,因此有许多过时的答案.截至2017年,所有浏览器都遵守该标准.

2017年答案:

document.body.scrollHeight

编辑:以上内容不考虑标签上的边距.如果您的身体有边距,请使用:

document.documentElement.scrollHeight

---

截至2017年,这应该被标记为对我的正确答案.

---

这有一个错误:例如,在``的开头有一个`

`元素,它的默认边距,它会将``元素向下推,而无法通过检测它.`document.documentElement.scrollHeight`(不是`document.body,scrollHeight`)是最准确的做事方式.这适用于身体边缘和身体内部物质的边缘向下推动它.

3> Mimo..：

---

你甚至可以用这个:

var B = document.body,
    H = document.documentElement,
    height

if (typeof document.height !== 'undefined') {
    height = document.height // For webkit browsers
} else {
    height = Math.max( B.scrollHeight, B.offsetHeight,H.clientHeight, H.scrollHeight, H.offsetHeight );
}

或者以更jQuery的方式(因为你说jQuery不说谎):)

Math.max($(document).height(), $(window).height())

4> Andrii Verby..：

---

完整文件高度计算:

为了更通用并找到任何文档的高度,您可以通过简单的递归找到当前页面上最高的DOM节点:

;(function() {
    var pageHeight = 0;

    function findHighestNode(nodesList) {
        for (var i = nodesList.length - 1; i >= 0; i--) {
            if (nodesList[i].scrollHeight && nodesList[i].clientHeight) {
                var elHeight = Math.max(nodesList[i].scrollHeight, nodesList[i].clientHeight);
                pageHeight = Math.max(elHeight, pageHeight);
            }
            if (nodesList[i].childNodes.length) findHighestNode(nodesList[i].childNodes);
        }
    }

    findHighestNode(document.documentElement.childNodes);

    // The entire page height is found
    console.log('Page height is', pageHeight);
})();

您可以在示例站点(http://fandango.com/或http://paperbackswap.com/)上测试它,并将此脚本粘贴到DevTools控制台.

注意:它正在使用Iframes.

请享用!

---

这就像一个魅力!这里没有其他答案可以获得全高(包括可滚动区域),它们都只返回可见区域的高度.

5> hashchange..：

---

确定文档大小的"jQuery方法" - 查询所有内容,获取最高价值,并希望获得最佳 - 在大多数情况下都有效,但并非在所有情况下都有效.

如果您确实需要文档大小的防弹结果,我建议您使用我的jQuery.documentSize插件.与其他方法不同,它实际上在加载时测试和评估浏览器行为,并根据结果从那里查询正确的属性.

这一次测试的对性能的影响是最小的,和插件返回,甚至怪异的情景正确的结果-不是因为我这么说,但由于大规模的,自动生成测试套件实际验证它.

因为插件是用vanilla Javascript编写的,所以你也可以在没有jQuery的情况下使用它.

6> Nic..：

---

我撒谎,jQuery为两个页面返回正确的值$(document).height(); ...为什么我怀疑它？