3

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

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

body { padding: 0; margin: 0; }
.absolute {
    position: absolute;
    height: 100px;
}
.fixed {
    position: fixed;
    height: 200px;
}
  • html.scrollHeight0（Opera/Firefox 中的视口高度）
  • html.offsetHeight0
  • body.scrollHeight0（Chrome 中的视口高度）
  • body.offsetHeight0
  • body.outerHeight0

如果我添加html { position: relative; },html.scrollHeight在 Chrome 中将是 100px，但没有值将是 200px。起初我也遇到了浮动问题，但我通过在body.

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

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

4

2 回答 2

2

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

$(document).height()

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

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

更新：

$('iframe').height($('iframe').parent().height())
于 2012-07-25T09:09:12.030 回答
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 次操作，就我而言，这大约是大多数文档的大小。

于 2012-07-26T13:38:41.137 回答