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

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 中的视口(viewport)高度)
• html.offsetHeight 0
• body.scrollHeight 0(Chrome 中的视口(viewport)高度)
• body.offsetHeight 0
• body.outerHeight 0

如果我添加 html { position: relative; }，html.scrollHeight在Chrome中会是100px，但是没有值会是200px。起初我也遇到了 float 问题，但我通过向 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())