2

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

我想iframe填充 parent 的剩余高度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，因为这意味着确保在调整大小、插入等时它会更新。

4

1 回答 1

0

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

于 2013-08-21T14:33:25.443 回答