获取文档内容的高度，包括绝对/固定定位元素答案

【问题标题】：Get height of document content including absolute/fixed positioned elements获取文档内容的高度，包括绝对/固定定位元素
【发布时间】：2012-07-31 18:39:25
【问题描述】：

我需要调整 iframe 的大小以匹配其内容，但我尝试过的高度属性不考虑带有position: fixed 的元素。

假设一个文档只有两个元素的 absolute 和 fixed 类。

body { padding: 0; margin: 0; }
.absolute {
    position: absolute;
    height: 100px;
}
.fixed {
    position: fixed;
    height: 200px;
}

html.scrollHeight 0（Opera/Firefox 中的视口高度）
html.offsetHeight0
body.scrollHeight 0（Chrome 中的视口高度）
body.offsetHeight0
body.outerHeight0

如果我添加html { position: relative; }，html.scrollHeight 在 Chrome 中将是 100px，但没有值将是 200px。一开始我也遇到了浮点数的问题，但我通过向body 添加一个clearfix 解决了这个问题。

我在这里做了一个jsbin：http://jsbin.com/ehixiq

如果无法获得真实身高，我最好的解决方法是什么？我只需要支持最新版本的 Opera、Chrome 和 Firefox。

【问题讨论】：

这里的答案非常优雅地解决了这个问题：stackoverflow.com/questions/16928101/…

标签： javascript css iframe

【解决方案1】：

我发现最好的方法是使用 javascript，因为它可以在渲染后可靠地获得高度。在最近的一个项目中，我使用 jQuery 来获得窗口的全高：

$(document).height()

你可以为元素高度做这样的事情：

$('.element2').height($('.element1').height())

更新：

$('iframe').height($('iframe').parent().height())

【讨论】：

jQuery 的height() 报告整个视口高度，而不是内容
只有 $(document) 是视口高度，传递一个元素将是元素高度（+padding）。如果内容是指元素中的文本，则可以在文本周围放置一个跨度，然后执行 $('.element span').height()。还更新了答案以包含更具体的父/子高度计算示例。
可能我不清楚，但我需要获取iframe文档中内容的高度，所以如果iframe内的最高元素是200px高，我想将iframe调整为200px。这对于带有position: static 的元素来说不是问题，因为我可以从 iframe 文档中使用 offsetHeight 或 scrollHeight 获取内容高度，但它不适用于 iframe 内的固定/绝对元素。

【解决方案2】：

我能弄清楚的唯一方法是获取所有元素的实际底部位置：

var els = Array.prototype.slice.call(document.body.getElementsByTagName('*'));
var elHeights = [];
for (var i = 0, l = els.length; i < l; i++) {
  elHeights.push(els[i].scrollTop + els[i].offsetHeight);
}
var docHeight = Math.max.apply(Math, elHeights);

浏览器在具有 100 个元素的 DOM 上每秒管理 5-100k 次操作，就我而言，这大约是大多数文档的大小。

【讨论】：