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

最新推荐文章于 2021-12-08 15:02:23 发布

w36680130

最新推荐文章于 2021-12-08 15:02:23 发布

阅读量688

点赞数

文章标签： javascript

原文链接：https://oldbug.net/q/4o5S/How-to-get-height-of-entire-document-with-JavaScript

版权

本文翻译自：How to get height of entire document with JavaScript?

Some documents I can't get the height of the document (to position something absolutely at the very bottom). 有些文档我无法获取文档的高度（将某些内容绝对定位在最底部）。 Additionally, a padding-bottom on seems to do nothing on these pages, but do on the pages where height will return. 此外，在这些页面上的底部填充似乎没有任何作用，但在高度会返回的页面上却没有作用。 Case(s) in point: 案例：

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

On Fandango 在Fandango
jQuery's $(document).height(); jQuery的$(document).height(); returns correct value 返回正确的值
document.height returns 0 document.height返回0
document.body.scrollHeight returns 0 document.body.scrollHeight返回0

On Paperback Swap: 在平装交换上：
jQuery's $(document).height(); jQuery的$(document).height(); TypeError: $(document) is null TypeError： $(document)为null
document.height returns an incorrect value document.height返回不正确的值
document.body.scrollHeight returns an incorrect value document.body.scrollHeight返回不正确的值

Note: I have browser level permissions, if there is some trick there. 注意：如果有一些窍门，我具有浏览器级别的权限。

#1楼

参考：https://stackoom.com/question/4o5S/如何使用JavaScript获取整个文档的高度

#2楼

I don't know about determining height just now, but you can use this to put something on the bottom: 我现在不知道确定高度，但是您可以使用它在底部放置一些东西：

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

#3楼

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

#4楼

Document sizes are a browser compatibility nightmare because, although all browsers expose clientHeight and scrollHeight properties, they don't all agree how the values are calculated. 文档大小是浏览器兼容性的噩梦，因为尽管所有浏览器都公开了clientHeight和scrollHeight属性，但是它们并不都同意如何计算值。

There used to be a complex best-practice formula around for how you tested for correct height/width. 关于如何测试正确的高度/宽度，曾经有一个复杂的最佳实践公式。 This involved using document.documentElement properties if available or falling back on document properties and so on. 这涉及使用document.documentElement属性（如果可用）或依靠文档属性等。

The simplest way to get correct height is to get all height values found on document, or documentElement, and use the highest one. 获取正确高度的最简单方法是获取文档或documentElement上找到的所有高度值，并使用最高的值。 This is basically what jQuery does: 基本上，这就是jQuery的作用：

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

A quick test with Firebug + jQuery bookmarklet returns the correct height for both cited pages, and so does the code example. 使用Firebug + jQuery小书签进行的快速测试将为两个引用的页面返回正确的高度，代码示例也是如此。

Note that testing the height of the document before the document is ready will always result in a 0. Also, if you load more stuff in, or the user resizes the window, you may need to re-test. 请注意，在文档准备就绪之前测试文档的高度将始终为0。此外，如果您在其中加载了更多内容，或者用户调整了窗口的大小，则可能需要重新测试。 Use onload or a document ready event if you need this at load time, otherwise just test whenever you need the number. 如果需要在加载时使用onload或文档就绪事件，请在需要该数字时进行测试。

#5楼

You can even use this: 您甚至可以使用以下命令：

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

or in a more jQuery way (since as you said jQuery doesn't lie) :) 或采用更多jQuery方式（因为您说过jQuery不会说谎）:)

Math.max($(document).height(), $(window).height())

#6楼

Add References properly 正确添加参考

In my case I was using a ASCX page and the aspx page that contains the ascx control is not using the references properly. 就我而言，我使用的是ASCX页面，而包含ascx控件的aspx页面未正确使用引用。 I just pasted the following code and it worked : 我只是粘贴了以下代码，它的工作原理是：

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

w36680130

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用JavaScript获取整个文档的高度？

Some documents I can't get the height of the document (to position something absolutely at the very
复制链接

扫一扫