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

Question

有很多方法可以获得文档的高度，但是由于浏览器的实现方式不同，大多数（我相信）都返回了许多值中的最高值...这在大多数时候都很好。

在我的情况下，我知道页面上有许多元素，它们的高度比窗口和视口高度小。我想要得到的是所有渲染元素的实际高度。

不起作用的东西（在Firefox中测试）：

1. $(document).height(); // gives the window height
2. document.body.scrollHeight; // gives 7, its always 7 I don't know why
3. document.body.offsetHeight; // also gives 7
4. document.documentElement.clientHeight; // sometimes gives window height
5. document.documentElement.scrollHeight; //gives window height
6. document.documentElement.offsetHeight; generally gives a value in the range of 23

目前我认为解决这个问题的方法可能是在页面底部插入div height: 0并抓住$(div).offset().top，但我觉得这是很可能在将来的某个时候出错。

所以在我这样做之前...

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

修改

人们要求澄清。下面是我想要的一个jsFiddle示例/我得到的结果。 https://jsfiddle.net/8Lu2zcw8/1/

运行会产生相同的Win Height值：并且Doc Height会写入控制台。

EDIT2：

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

Answer 1

我建议您使用$(document.body).height()。

在CSS中你必须把：

html,
body { height: 100%; }

只有在身体填充，边缘和身体元素的边界为0的情况下，这才会给出正确的结果。当直接儿童浮动或放置绝对位置时，这些元素的高度不算数。因此，对于浮动元素，您总是清除父级以解决这些包装问题。

如果没有，您可以使用$(document.body).outerHeight(includeMargin)

Answer 2

$(document).height()会为您提供内容大小，而不是窗口大小。如果它给你窗口的大小，那么你可能搞砸了你的CSS。此外，您可以尝试$('body').height()