使用Javascript（或jQuery）获取实际内容高度

获取文档高度的方法有很多种，但由于浏览器实现的不同，大多数（我相信）返回的值都是很多值中的最高值。。。这在大多数情况下都很好

在我的例子中，我知道页面上有许多元素的高度小于窗口和视口的高度。我想得到的是所有渲染元素的实际高度

不起作用的事情（在Firefox中进行测试）：

$（文档）.height（）；//给出窗口高度

document.body.scrollHeight；//给7，总是7我不知道为什么

document.body.offsetHeight；//同时给出7

document.documentElement.clientHeight；//有时给出窗户高度

document.documentElement.scrollHeight//提供窗口高度

document.documentElement.offsetHeight；通常给出的值范围为23

目前，我认为解决这个问题的方法可能是在我的页面底部插入一个高度为0的div，然后抓取

$（div）.offset（）.top

，但我觉得这很可能在将来某个时候出错

所以在我这么做之前

当内容高度小于窗口高度时，有没有办法知道内容高度

编辑：

人们要求澄清。下面是一个我想要/得到的结果的简单示例。

运行该命令会将Win Height:和Doc Height的值写入控制台

EDIT2:

我的问题是，正如@tim vermaelen在其解决方案的评论中指出的那样，由于浮动和绝对定位的元素，正文没有正确包装内容。

我建议您使用

$（document.body）.height（）

在CSS中，您必须输入：

html,
body { height: 100%; }

这只会在正文填充、正文元素的边距和边框为0的情况下给出正确的结果。当直接子元素浮动或置于绝对位置时，这些元素的高度不计算在内。因此，对于浮动元素，您总是清除父元素以解决这些包装问题

如果没有，您可以使用

$（document.body）.outerHeight（includeMargin）

我建议您使用

$（document.body）.height（）

在CSS中，您必须输入：

html,
body { height: 100%; }

这只会在正文填充、正文元素的边距和边框为0的情况下给出正确的结果。当直接子元素浮动或置于绝对位置时，这些元素的高度不计算在内。因此，对于浮动元素，您总是清除父元素以解决这些包装问题

如果没有，您可以使用
$（document.body）.outerHeight（includeMargin）
$（document.height（）
将为您提供内容大小，而不是窗口大小。若它给出了窗口的大小，那个么你们可能会弄乱你们的CSS。另外，您可以尝试
$（'body'）。height（）
$（文档）。height（）
将为您提供内容大小，而不是窗口大小。若它给出了窗口的大小，那个么你们可能会弄乱你们的CSS。此外，您还可以尝试
$（'body'）.height（）
$（document.height（）；/提供窗口高度
否，它提供文档高度：。任何增加都是由浏览器在主体上放置的默认填充引起的，您应该使用重置样式表来修复该填充。当你所展示的是什么不起作用，而不是问题的细节时，很难帮助你。浏览器之间的差异是由什么引起的？什么是HTML？添加了JSFIDLE示例
$（document）.height（）；//提供窗口高度
否，它提供文档高度：。任何增加都是由浏览器在主体上放置的默认填充引起的，您应该使用重置样式表来修复该填充。当你所展示的是什么不起作用，而不是问题的细节时，很难帮助你。浏览器之间的差异是由什么引起的？什么是HTML？添加了JSFIDLE示例$（document.body）.outerHeight（false）；与document.body.scrollHeight（7）$（document.body.outerHeight）相同（true）；与document.documentElement.offsetHeight（23）相同，因此使用firebug检查身体高度，查看“计算”选项卡，并将其与身体元素内的元素进行比较。如果注意到主体小于图元高度，则主体不会像应该的那样围绕图元。通常由浮动元素或绝对位置引起。谢谢Tim！你是对的，正文没有包装，因为整个页面是由绝对定位的div中的浮动元素组成的。。。。在我的辩护中，它的旧代码被修改了。这是最佳实践，直接传递元素引用而不是依赖选择器引擎，这显然是一个赢家。太好了，我完成了我的回答。$（document.body）。outerHeight（false）；与document.body.scrollHeight（7）$（document.body.outerHeight）相同（true）；与document.documentElement.offsetHeight（23）相同，因此使用firebug检查身体高度，查看“计算”选项卡，并将其与身体元素内的元素进行比较。如果注意到主体小于图元高度，则主体不会像应该的那样围绕图元。通常由浮动元素或绝对位置引起。谢谢Tim！你是对的，正文没有包装，因为整个页面是由绝对定位的div中的浮动元素组成的。。。。在我的辩护中，它的旧代码被修改了。这是最佳实践，直接传递元素引用而不是依赖选择器引擎，这显然是一个赢家。太好了，我完成了我的回答。