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

Question

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

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

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

关于平装本：
jQuery 的$(document).height(); 类型错误： $(document)为空
document.height返回不正确的值
document.body.scrollHeight返回不正确的值

注意：如果那里有一些技巧，我有浏览器级别的权限。

Answer 1

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

过去有一个复杂的最佳实践公式，用于测试正确的高度/宽度。 这涉及使用 document.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或文档就绪事件，否则只需在需要数字时进行测试。

Answer 2

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

2020年答案：

document.body.scrollHeight

编辑：上面没有考虑<body>标签上的边距。 如果您的身体有边距，请使用：

document.documentElement.scrollHeight

Answer 3

你甚至可以使用这个：

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

Answer 4

完整文档高度计算：

为了更通用并找到任何文档的高度，您可以通过简单的递归找到当前页面上最高的 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);
})();

您可以通过将此脚本粘贴到 DevTools 控制台，在您的示例站点（ http://fandango.com/或http://paperbackswap.com/ ）上对其进行测试。

注意：它与Iframes一起使用。

享受！

Answer 5

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

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

这种一次性测试对性能 的影响很小，即使在最奇怪的情况下，插件也能返回正确的结果——不是因为我这么说，而是因为一个庞大的、自动生成的测试套件实际上验证了它确实如此。

因为该插件是用 vanilla Javascript 编写的，所以您也可以在没有 jQuery 的情况下使用它。

Answer 6

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

Answer 7

2017 年的正确答案是：

document.documentElement.getBoundingClientRect().height

与document.body.scrollHeight不同，此方法考虑正文边距。 它还提供分数高度值，这在某些情况下很有用

Answer 8

要以跨浏览器/设备的方式获取宽度，请使用：

function getActualWidth() {
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||
                      document.body.offsetWidth;

    return actualWidth;
}

Answer 9

对于使用功能检测无法按需滚动页面的任何人，我想出了这个 hack 来检测在动画滚动中使用哪个功能。

问题是document.body.scrollTop和document.documentElement在所有浏览器中总是返回true 。

但是，您实际上只能使用一个或另一个滚动文档。 根据w3schools， d.body.scrollTop用于 Safari 和document.documentElement用于所有其他人（参见示例）

element.scrollTop适用于所有浏览器，但不适用于文档级别。

    // get and test orig scroll pos in Saf and similar 
    var ORG = d.body.scrollTop; 

    // increment by 1 pixel
    d.body.scrollTop += 1;

    // get new scroll pos in Saf and similar 
    var NEW = d.body.scrollTop;

    if(ORG == NEW){
        // no change, try scroll up instead
        ORG = d.body.scrollTop;
        d.body.scrollTop -= 1;
        NEW = d.body.scrollTop;

        if(ORG == NEW){
            // still no change, use document.documentElement
            cont = dd;
        } else {
            // we measured movement, use document.body
            cont = d.body;
        }
    } else {
        // we measured movement, use document.body
        cont = d.body;
    }

Answer 10

使用打击代码计算高度 + 滚动

var dif = document.documentElement.scrollHeight - document.documentElement.clientHeight;

var height = dif + document.documentElement.scrollHeight +"px";

Answer 11

下面的跨浏览器代码评估 body 和 html 元素的所有可能高度并返回找到的最大值：

            var body = document.body;
            var html = document.documentElement;
            var bodyH = Math.max(body.scrollHeight, body.offsetHeight, body.getBoundingClientRect().height, html.clientHeight, html.scrollHeight, html.offsetHeight); // The max height of the body

一个工作示例：

 function getHeight() { var body = document.body; var html = document.documentElement; var bodyH = Math.max(body.scrollHeight, body.offsetHeight, body.getBoundingClientRect().height, html.clientHeight, html.scrollHeight, html.offsetHeight); return bodyH; } document.getElementById('height').innerText = getHeight();

 body,html { height: 3000px; } #posbtm { bottom: 0; position: fixed; background-color: Yellow; }

 <div id="posbtm">The max Height of this document is: <span id="height"></span> px</div> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br /> example document body content example document body content example document body content example document body content <br />

Answer 12

我现在不知道如何确定高度，但是您可以使用它在底部放置一些东西：

<html>
<head>
<title>CSS bottom test</title>
<style>
.bottom {
  position: absolute;
  bottom: 1em;
  left: 1em;
}
</style>
</head>

<body>

<p>regular body stuff.</p>

<div class='bottom'>on the bottom</div>

</body>
</html>

Answer 13

正确添加引用

就我而言，我使用的是 ASCX 页面，而包含 ascx 控件的 aspx 页面未正确使用引用。 我刚刚粘贴了以下代码并且它起作用了：

<script src="../js/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script src="../js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../js/jquery-1.5.1.js" type="text/javascript"></script>