IE - 在表格行中使用100%高度

Question

我正在使用css表,其中最后一个表行的高度为100% - 以填充剩余的高度.

小提琴

这适用于我跨浏览器(包括IE).

但是,如果我然后在最后一个表格行添加一些固定高度的div(这是动态内容 - 我不知道它们中有多少)最后一个div有高度:100% - 为了填满最后一个表格行.- 像这样:

FIDDLE -

这现在在IE中不起作用(即使是IE10)

我该怎么做才能在IE中工作？

(编辑:正如在评论中正确指出:它在任何浏览器中都不起作用 - 虽然在Chrome和Firefox中它看起来像是有效的 - 高度:第三行最后一个div的100%没有填满剩余高度,但占据第3行的完整高度......

所以我尝试在第3行使用表行: - FIDDLE ...现在这适用于其他浏览器,但仍然无法在IE中运行!)

标记

<div class="table">
    <div class="row row1">row1</div>
    <div class="row row2">row2</div>
    <div class="row row3">
        <div class="row3a">row3a</div>
        <div class="row3b">row3b</div>
        <div class="row3c">row3c</div> <!-- in IE this doesn't fill the last row -->
    </div>
</div>

CSS

.table
{
    display: table;
    width: 600px;
    height: 300px;
}
.row
{
    display: table-row;
}
.row1
{
    height: 50px;
    background: pink;
}
.row2
{
    height: 100px;
    background: orange;
}
.row3
{
    height: 100%;
    background: yellow;
}
.row3a
{
    height: 30px;
    background: purple;
}
.row3b
{
    height: 60px;
    background: aqua;
}
.row3c
{
    height: 100%;
    background: brown;
}

Answer 1

IE 为您提供您想要的完美结果。您将其呈现为表行。您不需要为最后一行设置特定高度来填充剩余空间。

将高度设置为 100% 实际上是错误的；这里 100% 表示 row3 的实际高度，并且 chrome 按照您所写的方式渲染它。

即 row3c 溢出其父 row3。

由于您为其余行指定了像素高度，因此它不会填充。您需要指定所有的百分比高度（ row3a -> height: 20%, row3b -> height: 30%, row3c -> height: 50%）

会起作用的