html - IE中让iframe填充div的剩余高度

Question

我有一个 div，其中包含另一个 div 未知的 height 和一个 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，因为这意味着要确保它在调整大小、插入等内容时进行更新。

Answer 1

试试 height:100%; auto 看看它做了什么