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

我有一个div，其中包含另一个高度未知的

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>

（将iframe更改为div）

在非IE浏览器中，iframe将填充剩余空间。在IE中，

iframe

高度设置为与

容器

相同的高度。因此，整个高度最终是

.container

的高度加上

.top

的高度

这幅图也许可以更好地解释：

IE已将iframe的高度设置为整个桌子的高度，但由于

。top

也有一个高度，它会使桌子变得大于指定的高度

---

是否有任何方法可以在不使用JS的情况下修复此问题？我不想使用JS，因为它意味着确保在调整大小、插入内容等时更新它。

尝试

高度：100%；自动

并查看它的作用

没有帮助，将其中一个高度更改为“自动”将阻止其扩展。

.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
}