有些文档我无法获得文档的高度（将某些内容绝对定位在最底部）。另外，在这些页面上的底部填充似乎没有任何作用，但在高度会返回的页面上却没有作用。案例：

http：//fandango.comhttp：//paperbackswap.com

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

在平装书交换上：
jQuery的$(document).height(); TypeError：$(document)为空document.height返回不正确的值document.body.scrollHeight返回不正确的值

注意：我具有浏览器级别权限，如果有什么窍门。

$（document）为null，因为该站点未加载jQuery ...

嗯，可能发誓我检查了其他内容以确认jQuery已注册，但看起来不像我那样，哈！我以为Firebug打包了jQuery ...嗯，我想我会检查一下是否可以解决问题。

firebug没有打包的jQUery

请参阅查找浏览器窗口的大小。它有一个很好的表格，可以显示不同浏览器的行为。

#1 楼

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

过去存在着一个复杂的最佳实践公式您如何测试正确的高度/宽度。这涉及使用document.documentElement属性（如果可用）或依靠文档属性等。

获取正确高度的最简单方法是获取在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 + jQuerybookmarklet进行的快速测试将为两个引用页面返回正确的高度，代码示例也是如此。 />
请注意，在准备好文档之前测试文档的高度始终会为0。此外，如果您在其中加载了更多内容，或者用户调整了窗口的大小，则可能需要重新测试。如果在加载时需要此事件，请使用onload或文档准备事件，否则，只要需要此编号，就进行测试。

评价此解决方案，因为它在您使用原型库时有效，而使用jQuery则没有此类问题

–se_pavel
09年9月29日在18:28

使用iframe和jquery时，由于采用这种计算方法，因此iframe的文档高度始终至少应为iframe本身的高度。当您要降低iframe的高度以匹配内容时，请务必注意这一点。您首先必须重置iframe的高度。

– David Lay
09年11月30日13:35

我需要扩大iframe并缩小它（facebook应用程序），发现document.body.offsetHeight是我的最佳选择，大多数浏览器都准确地支持该文件。

– JeffG
2012年8月3日在1:04

这很好，尽管如果文档未准备好，可能会导致不正确的结果，即在服务器生成的代码中使用时...

–stuartdotnet
2012年10月2日，下午3:51

在文档准备就绪之前无法对其进行测试。这与生成的代码/文档无关，而是与文档的加载方式无关。该测试必须在文档准备就绪后运行，我建议仅在文档完全加载后才运行该测试，因为其余项目可能会影响高度，并调整浏览器的大小。

–保加
2012-12-5 13:02

#2 楼

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

document.body.scrollHeight

编辑：以上内容并未考虑<body>标签的边距。如果您的身体有边缘，请使用：

document.documentElement.scrollHeight

嗯-现在我对其进行测试并且可以正常工作-我不知道为什么-好的:)-我删除了之前的评论

–卡米尔（KamilKiełczewski）
17年6月28日在16:26

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

–琼
17年7月7日在9:43

@Joan取决于原始海报来决定:)

–马奎佐
17年7月7日在18:06

在存在边距的情况下不起作用。 document.documentElement.getBoundingClientRect（）效果更好。

– Torvin
17年11月18日在4:20

这样做有一个错误：例如说，在的开始处有一个

元素，它具有默认的边距，它将把元素向下推而无法检测到它。 document.documentElement.scrollHeight（不是document.body，scrollHeight）是最准确的处理方式。这适用于身体边缘和身体内部的东西边缘将其向下推。

– Ethan
18年2月13日在8:25

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

#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配合使用。

享受吧！

这就像一个魅力！此处没有其他答案可用来获取完整高度（包括可滚动区域），它们都只返回可见区域的高度。

–马丁·克里斯蒂安森（Martin Kristiansson）
17年4月27日在13:14

真的很特别，没想到这一点。我猜只有一个在phantomjs中工作。

–MindlessRanger
18年5月25日在18:21

#5 楼

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

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

一次性测试对性能的影响很小，即使在最奇怪的情况下，该插件也能返回正确的结果-不是因为我这么说，而是因为有大量自动生成的测试套件

由于该插件是用原始Javascript编写的，因此您也可以在不使用jQuery的情况下使用它。

#6 楼

我撒谎了，jQuery返回了两个页面的正确值$（document）.height（）; ...为什么我对此表示怀疑？

不同的浏览器兄弟。

–贾里奇
2015年2月25日在2:37

#7 楼

2017年的正确答案是：

document.documentElement.getBoundingClientRect().height

与document.body.scrollHeight不同，此方法考虑了车身边距。
它还给出了分数高度值，这在某些情况下可能有用案例

这些是我在此页面上尝试您的方法时得到的结果：i.imgur.com/0psVkIk.png您的方法返回的内容类似于窗口高度，而document.body.scrollHeight列出了整个可滚动高度，即原来的问题问了。

–马奎佐
17年11月22日在22:05

@Marquizzo，这是因为此页面的CSS中包含html {height：100％}。因此，API会正确返回实际计算出的高度。尝试删除此样式并在正文中添加页边距，您将看到使用document.body.scrollHeight的问题。

– Torvin
17年11月22日23:31

这样做有一个错误：例如说，在的开始处有一个

元素，它具有默认的边距，它将把元素向下推而无法检测到它。 document.documentElement.scrollHeight（不是document.body，scrollHeight）是最准确的处理方式。

– Ethan
18年2月13日在8:23
@Booligoosh不确定您的意思。在这种情况下，documentElement.scrollHeight给出错误的值。 documentElement.getBoundingClientRect（）。height给出正确的值。检查一下：jsfiddle.net/fLpqjsxd

– Torvin
18年2月13日在22:57
@torvin事实仍然是，getBoundingClientRect（）。height不返回预期的结果。它被旁白了，而其他3（三种）方法没有被旁白。包括您提到的不如它的那个。而且您坚持这样做，建议从此页面的html高度中删除100％，并为其添加边距。重点是什么？只需接受getBoundingClientRect（）。height也不是防弹的即可。

–罗布·瓦（Rob Waa）
19年5月30日在21:15

#8 楼

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

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

    return actualWidth;
}

我们在谈论身高。不宽。

–睫毛
2015年10月15日在20:28

#9 楼

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

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

但是，您只能实际滚动一个文档或另一个文档。根据w3schools，适用于Safari的d.body.scrollTop和适用于所有其他浏览器的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;
    }

#10 楼

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

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

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

#11 楼

下面的交叉浏览器代码评估正文和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 />

如果出现不赞成，请说明动机，以便我纠正这一点。非常感谢

– Willy wonka
17年3月14日14:30在

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

相信我，我已经用尽了HTML和CSS资源。无法解释，但是如果您在这些站点上尝试使用，则会看到问题。

– Nic
09年7月17日在22:09

#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获取整个文档的高度？

评论

#1 楼

评论

#2 楼

评论

元素，它具有默认的边距，它将把元素向下推而无法检测到它。 document.documentElement.scrollHeight（不是document.body，scrollHeight）是最准确的处理方式。这适用于身体边缘和身体内部的东西边缘将其向下推。

– Ethan
18年2月13日在8:25

#3 楼

#4 楼

评论

#5 楼

#6 楼

评论

#7 楼

评论

#8 楼

评论

#9 楼

#10 楼

#11 楼

评论

#12 楼

评论

#13 楼

编程黑洞网

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

评论

#1 楼

评论

#2 楼

评论

元素，它具有默认的边距，它将把元素向下推而无法检测到它。 document.documentElement.scrollHeight（不是document.body，scrollHeight）是最准确的处理方式。这适用于身体边缘和身体内部的东西边缘将其向下推。 – Ethan 18年2月13日在8:25

#3 楼

#4 楼

评论

#5 楼

#6 楼

评论

#7 楼

评论

#8 楼

评论

#9 楼

#10 楼

#11 楼

评论

#12 楼

评论

#13 楼

元素，它具有默认的边距，它将把元素向下推而无法检测到它。 document.documentElement.scrollHeight（不是document.body，scrollHeight）是最准确的处理方式。这适用于身体边缘和身体内部的东西边缘将其向下推。

– Ethan
18年2月13日在8:25