有些文件我不能得到文件的高度(位置绝对在最底部)。此外,填充底部似乎在这些页面上不起任何作用,但在高度将返回的页面上起作用。相关案例:

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

在胡闹 jQuery的$(文档).height ();返回正确的值 文档。Height返回0 document.body.scrollHeight返回0

关于平装书互换: jQuery的$(文档).height ();TypeError: $(document)为空 文档。Height返回不正确的值 scrollheight返回错误的值

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


当前回答

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

关于如何测试正确的高度/宽度,曾经有一个复杂的最佳实践公式。这涉及到文档的使用。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 + jQuery bookmarklet进行快速测试,可以返回两个被引用页面的正确高度,代码示例也是如此。

注意,在文档准备好之前测试文档的高度总是会得到0。另外,如果你加载了更多的东西,或者用户调整了窗口的大小,你可能需要重新测试。如果您需要在加载时使用onload或文档就绪事件,否则只需在需要该数字时进行测试。

其他回答

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

关于如何测试正确的高度/宽度,曾经有一个复杂的最佳实践公式。这涉及到文档的使用。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 + jQuery bookmarklet进行快速测试,可以返回两个被引用页面的正确高度,代码示例也是如此。

注意,在文档准备好之前测试文档的高度总是会得到0。另外,如果你加载了更多的东西,或者用户调整了窗口的大小,你可能需要重新测试。如果您需要在加载时使用onload或文档就绪事件,否则只需在需要该数字时进行测试。

确定文档大小的“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>

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

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

    return actualWidth;
}

下面的跨浏览器代码计算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 />