获取的文档内容高度包括绝对/固定定位的元素(Get height of document conte

我需要调整的iframe的内容相匹配，但我已经试过了高度属性不考虑与元素position: fixed 。

假定仅具有两个与所述内容的文件absolute和fixed类。

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

• html.scrollHeight 0（在Opera /火狐视口的高度）
• html.offsetHeight 0
• body.scrollHeight 0（在Chrome视口的高度）
• body.offsetHeight 0
• body.outerHeight 0

如果我添加html { position: relative; } html { position: relative; } ， html.scrollHeight会在Chrome 100像素，但没有价值将是200像素。 起初我还与彩车的问题，但我解决了通过添加clearfix到body 。

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

如果这是不可能得到真正的高度，这将是我最好的解决方法吗？ 我只需要支持Opera，Chrome和Firefox的最新版本。

Answer 1:

我发现最好的办法是使用JavaScript，因为它可以在渲染之后可靠地获得高度。 在最近的一个项目中，我这样做是与jQuery得到窗口的全高：

$(document).height()

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

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

更新：

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

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

浏览器每秒5-100k操作之间管理上有100个元素一个DOM以及我的情况是关于大小大多数文档都会有。

文章来源: Get height of document content including absolute/fixed positioned elements