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表格布局。

如果可以，我实际上建议您 USE 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;
}

Answer 2

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

将高度设置为100％实际上是错误的; 这里100％表示row3的实际高度，chrome会像你写的那样呈现它。

即row3c溢出其父row3。

因为您为剩余的行指定了像素高度，所以它不会填充。你需要指定所有的百分比高度（row3a - >高度：20％，row3b - ＆gt;高度：30％，row3c - ＆gt;高度：50％）

它会起作用

Answer 3

你给桌子的高度为300px，这是小提琴http://jsfiddle.net/yKPq3/11/ and assuming you want table to be filled 300px, you need to change .row3 to height:150px and .row3c to height:60px

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

标记

CSS

3 个答案:

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