有些文件我不能得到文件的高度(位置绝对在最底部)。此外，填充底部似乎在这些页面上不起任何作用，但在高度将返回的页面上起作用。相关案例:
http://fandango.com http://paperbackswap.com
在胡闹 jQuery的$(文档).height ();返回正确的值 文档。Height返回0 document.body.scrollHeight返回0
关于平装书互换: jQuery的$(文档).height ();TypeError: $(document)为空 文档。Height返回不正确的值 scrollheight返回错误的值
注意:我有浏览器级别的权限，如果有一些技巧在那里。
当前回答
全文高度计算:
为了更通用，找到任何文档的高度，你可以通过简单的递归找到当前页面上最高的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一起工作。
享受吧!
其他回答
确定文档大小的“jQuery方法”——查询所有内容，取最大值，并期待最好的结果——在大多数情况下都适用，但并非所有情况都适用。
如果您确实需要文档大小的防弹效果，我建议您使用我的jQuery。documentSize插件。与其他方法不同的是，它实际上是在加载浏览器时测试和评估浏览器行为，并根据结果查询正确的属性。
这种一次性测试对性能的影响很小，即使在最奇怪的情况下，插件也能返回正确的结果——不是因为我这么说，而是因为一个大规模的自动生成的测试套件实际上验证了它是正确的。
因为这个插件是用普通Javascript编写的，所以你也可以不用jQuery来使用它。
我不知道如何确定高度，但你可以用这个在底部放一些东西:
<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>
对于那些在按需滚动页面时遇到困难的人来说，使用功能检测，我想出了这个方法来检测在动画滚动中使用哪个功能。
问题是document.body. scrolltop和document。documentElement在所有浏览器中总是返回true。
但是，实际上您只能使用其中一种滚动文档。d.body.scrollTop用于Safari和文档。根据w3schools为所有其他元素提供documentElement(参见示例)
元素。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;
}
2017年的正确答案是:
.height document.documentElement.getBoundingClientRect ()
与document.body.scrollHeight不同的是，该方法只考虑正文边距。 它还给出了分数高度值，这在某些情况下是有用的
下面的跨浏览器代码计算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 />
