5

最後のテーブル行の高さが 100% の css テーブルを使用して、残りの高さを埋めています。

フィドル

これは、クロスブラウザー (IE を含む) で機能します。

ただし、最後のテーブル行に固定高さの div を追加すると (これは動的コンテンツです - いくつあるかわかりません)、最後の div の高さ:100% - いっぱいにするために最後のテーブル行。- このような：

フィドル-

これはIEでは機能しません（IE10でも）

IE でこれを機能させるにはどうすればよいですか?

（編集：コメントで正しく指摘されているように：どのブラウザーでも機能しません-Chromeとfirefoxでは機能するように見えます-3行目の最後の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;
}
4

3 に答える 3

3

純粋な 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;
}
于 2013-10-06T12:22:05.433 に答える
0

テーブルの高さを 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

于 2013-10-06T12:25:48.783 に答える