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

Question

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

FIDDLE

这适用于我的跨浏览器(包括 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

纯 CSS，跨浏览器解决方案，不使用 CSS 表格布局。

如果可以的话，我实际上建议您使用 CSS 表格布局。 (我不知道为什么你不希望它出现在你的行中，它非常好。) 或者 flexbox 布局，虽然它还没有在所有浏览器中正确实现。 -- 我刚刚在评论中读到它在 IE 中对您不起作用，好吧:我的解决方案确实..即使在 IE8 中也是如此。

Working Fiddle

HTML:我正在使用我在评论中提到的额外包装器。

<div class="table">
    <div class="row1">row1</div>
    <div class="row2">row2</div>
    <div class="row3">
        <div class="Wrapper">
            <div class="row3a">row3a</div>
            <div class="row3b">row3b</div>
            <div class="row3c">row3c</div>
        </div>
    </div>
</div>

CSS:(大部分用于背景)

.table
{
    width: 600px;
    height: 900px;
}
.row1
{
    height: 50px;
    background: pink;
}
.row2
{
    height: 100px;
    background: orange;
}
.row3
{
    background: yellow;
    position: relative;
}

.row3a
{
    height: 30px;
    background: purple;
}
.row3b
{
    height: 60px;
    background: aqua;
}
.row3c
{
    background: brown;
}

.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
}

.table:before, .Wrapper:before
{
    content: '';
    height: 100%;
    float: left;
}

.row3:after, .row3c:after
{
    content: '';
    display: block;
    clear: left;
}