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

純CSS，跨瀏覽器解決方案，不使用CSS表格布局。

我實際上建議你使用 CSS表格布局，如果可以的話。 （我不知道為什么你不想在你的行中，它完全沒問題。）或者flexbox布局，雖然它在所有瀏覽器中都沒有正確實現.. - 我只是在評論中讀到它沒有'在IE中為你工作，好吧：我的解決方案確實......即使使用IE8。

工作小提琴

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 - > height：20％，row3b - > height：30％，row3c - > height：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