0

別の「メインコンテンツ」内に「コンテンツ左」という div があります。子 div が親の高さの 100% を想定するようにしたい。

#main_content {
display: table;
width: 99%;
margin-left: auto;
margin-right: auto;
}

#content-left {
width: 250px;
float: left;
display: table-cell;
padding-bottom: 8px;
background-color: #F6F5F4;
height: 100%;
}
#content-rightside {
width: 782px;
float: left;
display: block;
padding-left: 10px;
}
4

2 に答える 2

1

height: 100%;CSS ルールが機能するには、要素のすべての親に明示的な高さが定義されている必要があります。このタイプのスタイルシートは機能します:

html,
body,
#main-content,
#left-column,
#right-column
{
    height: 100%;
}

#left-column
{
    background-color: #ccc;
    float: left;
    width: 75%;
}

#right-column
{
    background-color: #eee;
    float: left;
    width: 25%;
}

そして、ここにあなたが見るフィドルがあります：http://jsfiddle.net/txReR/

アップデート

高さをコンテンツに基づくものにしたい場合は、次のdisplay: tableように使用します。

#main-content
{
    display: table;
    width: 100%;
}

#left-column
{
    background-color: #ccc;
    display: table-cell;
    width: 75%;
}

#right-column
{
    background-color: #eee;
    display: table-cell;
    width: 25%;
}

そして、ここに更新されたフィドルがあります: http://jsfiddle.net/txReR/1/

このアプローチの欠点の 1 つは、CSS テーブルを使用するとブラウザーの互換性がより問題になることです。

于 2013-04-18T20:28:13.447 に答える
0

これはよくある問題です。目標を達成する方法を説明するコラムを次に示します。

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

于 2013-04-18T19:32:26.377 に答える