獲取文檔內容的高度，包括絕對/固定定位元素

Question

我需要調整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.offsetHeight 0
• body.scrollHeight 0（Chrome中的視口高度）
• body.offsetHeight 0
• body.outerHeight 0

如果我添加html { position: relative; } html { position: relative; } ， html.scrollHeight在Chrome中為100px，但沒有值為200px。 起初我也有浮動問題，但我通過向body添加一個clearfix來解決這個問題。

我在這里做了一個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);

瀏覽器在具有100個元素的DOM上管理每秒5-100k次操作，在我的情況下，大多數文檔將具有大小。