2 
​<div id='container'>
    <div class='left'></div>
    <div class='right'></div>
    <div class='clear'></div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

ここ jsFiddle で実際に見ることができる上記の単純なマークアップを考えるとright、明示的な高さを持たない親コンテナーの残りの高さをフロート div が占めるようにするにはどうすればよいでしょうか? 親コンテナーの最終的な高さは、フローティングleftdiv によって決まります。

通常、私はこの問題を Javascript で解決し、ページが読み込まれた後に高さを修正します。しかし、これをどのように処理するかについては、代替の標準的で最適な方法が必要です。

これは、このようにレイアウトを構造化することの固有の問題にすぎないと思います<table>。

4

1 に答える 1

3

フロートを使用して親の明示的な高さなしでは実行できません。

ただし、実際にテーブルを使用せずにテーブルの動作を模倣するdisplay: table-;andを使用できます。table-cell

#container { 
    width: 200px;
    background-color: green;
    display: table;
}
.left {
    display: table-cell;
    width: 30px;
    height: 200px;
    background-color: red;
}
.right {
    display: table-cell;
    height: 100%;
    width: 30px;
    background-color: blue;
}

この方法では、クリア要素は必要なく、宣言されている限り、2 つの div は常に高さの 100% を占めます。

http://jsfiddle.net/6XagR/4/ </p>

于 2012-12-05T20:31:36.840 に答える