Question

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

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

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

平装书交换：
jQuery的$(document).height(); TypeError：$(document)为空 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事件，否则只需在需要时进行测试。

Answer 2

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

2017年答案：

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

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

注意：它正在使用Iframes。

享受！

Answer 5

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

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

这次一次性测试对性能is minimal的影响，即使是最奇怪的场景，插件也会返回正确的结果 - 不是因为我这么说，而是因为一个庞大的，自动生成的测试套件实际验证了它确实如此。

因为插件是用vanilla Javascript编写的，所以你也可以使用without 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

对于使用功能检测无法按需滚动页面的任何人，我提供了此技巧来检测动画滚动中要使用的功能。

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

但是，您实际上只能滚动一个或另一个文件。根据{{3}}

，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

一个工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

13 个答案:

一个工作示例：