javascript - 使用 Javascript(或 jQuery)获取实际内容高度

Question

获取文档高度的方法有很多，但由于浏览器实现不同，其中大多数(我相信)返回多个值中的最高值......大多数时候这都很好。

就我而言，页面上有许多元素，我知道这些元素的高度小于窗口和视口(viewport)的高度。我想要获取的是所有渲染元素的实际高度。

不起作用的事情(在 Firefox 中测试):

1. $(文档).height();//给出窗口高度
2. document.body.scrollHeight;//给出 7，它总是 7 我不知道为什么
3. document.body.offsetHeight;//也给出 7
4. document.documentElement.clientHeight;//有时给出窗口高度
5. document.documentElement.scrollHeight;//给出窗口高度
6. document.documentElement.offsetHeight;一般给出23范围内的值

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

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

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

编辑:

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

运行该命令会导致 Win Height: 和 Doc Height 的值相同，并写入控制台。

编辑2:

我的问题是由于主体由于 float 和绝对定位的元素而未正确包装内容，正如@tim-vermaelen 在其解决方案的评论中所指出的那样。

Answer 1

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

在 CSS 中你必须输入:

html,
body { height: 100%; }

只有在 body 元素的 body padding、margin 和 border 为 0 的情况下，这才会给出正确的结果。当直接子元素 float 或放置在绝对位置时，这些元素的高度不计算在内。因此，对于 float 元素，您始终需要清除父级来解决这些包装问题。

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