在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，看看它做了什么