使iframe填充IE中div的剩余高度答案

【问题标题】：Make iframe fill remaining height of div in IE使iframe填充IE中div的剩余高度
【发布时间】：2013-08-21 23:39:25
【问题描述】：

我有一个 div，其中包含另一个未知 height 的 div 和一个 iframe。

我想让iframe 填充父div 的剩余高度。经过大量搜索后，我发现这样做的唯一方法是使用 CSS 表格，该表格适用于除 IE 之外的所有浏览器。

这是我正在使用的 HTML：

<div class="container">
    <div class="top">
        <div style="height: 100px; background: yellow">Top bar</div>
    </div>
    <div class="bottom">
        <iframe />
    </div>
</div>

这是 CSS：

.container {
    position: relative;
    display: table;
    height: 300px;
    width: 200px;
    text-align: center;
}

.top {
    display: table-row;
}

.bottom {
    /* changing this to table-row works correctly except the iframe no longer expands to the full height in IE */
    display: table-cell;
    height: 100%;
    background: blue;
}

iframe {
    background:red;
    height:100%;
    height:100%;
    position:relative
}

JSFiddle（将 iframe 更改为 div）

在非 IE 浏览器中，iframe 会填充剩余空间。在 IE 中，iframe 高度设置为与.container 相同的高度。所以整个高度最终是.container 的高度加上.top 的高度。

这张图片可能解释得更好：

IE 已将 iframe 的高度设置为整个表格高度，但由于 .top 也有高度，它使表格变得大于指定高度。

有没有办法在不使用 JS 的情况下解决这个问题？我不想使用 JS，因为这意味着在调整大小、插入等时确保它更新。

【问题讨论】：

标签： html css internet-explorer

【解决方案1】：

试试height:100%; auto 看看有什么作用

【讨论】：

没有帮助，将任一高度更改为自动停止扩展。