1

2列のレイアウトを設定していて、2つの列の親divを埋めるために両方の列を自動的に拡大したいのですが、その理由は、左側の列に背景と境界線があり、ページの全面が乱雑に見えないようにします。私はインラインブロックを使用して2つの列を整列させますが、floatなどではありません（オーバーフロー：hiddenは、divから出る可能性のある機能の一部を台無しにするため使用できません（例：ドロップダウンメニュー））。この方法を使用して、これを行う簡単な方法。

jsfiddle：

http://jsfiddle.net/sFBGX/

4

2 に答える 2

9

CSSテーブルレイアウトを使用できます（HTMLテーブルレイアウトではなく、セマンティクスが不十分です）。

.container {
    display: table;
    table-layout: fixed;
    width: 944px;
    font-size: 0.75em;

}
.col {
    display: table-cell;
    vertical-align: top;
}

.container .left
{
    width: 236px;
    background-color:grey;
}
.container .right
{
    width: 708px;
    background-color:yellow;
}
<div class="container">
    <div class="col left">Left</div>
    <div class="col right">Right
    </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>Hey
      
    </div>
</div>

互換性はIE8+であり、必要に応じてIE6/7のフォールバックはinline-block

以前の回答でのより長い説明：古き良きフェイクカラムの方法もあちこちにあります（この手法を念頭に置いて設計を検討する必要があります）

于 2012-09-07T16:47:48.300 に答える
0

これを試してください：http：//jsfiddle.net/scrimothy/Y2ZsJ/

これをcssに追加するだけです。

.container { overflow: hidden; }
.container div { 
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

（from：http ://css-tricks.com/fluid-width-equal-height-columns/ under the heading：One True Layout Method）

于 2012-09-07T16:55:00.003 に答える