有些文件我不能得到文件的高度(位置绝对在最底部)。此外,填充底部似乎在这些页面上不起任何作用,但在高度将返回的页面上起作用。相关案例:
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或文档就绪事件,否则只需在需要该数字时进行测试。
下面的跨浏览器代码计算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 />