css - 列の自動拡張

Question

ヘッダーの下に 3 つの列があります。左サイドバー、コンテンツ、右サイドバーです。最も高い列の高さに応じて列の高さを増やしたい。たとえば、列の 1 つが高さ 400 ピクセルの場合、残りの 2 つの列を同じ高さにします。

たくさんの CSS コードを試しましたが、どれも機能しません。上記のレイアウトを取得するために必要なCSSコードを教えてください..?? ありがとうございました。

Answer 1

非常に多くのオプションがありますが、これはその 1 つです。

http://jsfiddle.net/7cc6m/1/

HTML:

<div id="header"></div>
<div id="main">
    <div id="left" class="sidebar"></div>
    <div id="content"></div>
    <div id="right" class="sidebar"></div>
</div>
<div id="footer"></div>

CSS:

body, html {
    padding: 0;
    margin: 0;
}

body {
    height: 100%;
    width: 100%;
}

#header, #footer {
    position: absolute;
    height: 100px;
    left: 0px;
    right: 0px;
}

#footer{ bottom: 0px; }

    #left.sidebar, #content, #right.sidebar {
    position: absolute;
    top: 100px;
    bottom: 100px;
}

#left.sidebar {
    left: 0px;
    width: 200px;
}

#right.sidebar {
    right: 0px;
    width: 200px;
}

#content {
    left: 200px;
    right: 200px;
}

CSS3

次のように flex-box 属性を使用できるようになりました: http://jsfiddle.net/7cc6m/8/

#main {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex-box;
}

.sidebar {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: #e8e8e8;
    padding: 10px;
}

#content{
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;                
    background: #dedede;
    padding: 10px;
}

Answer 2

少なくともいくつかの方法があります。オーバーフローを非表示にして「左」「中央」「右」のコンテナーとして新しい div を追加し、3 つの div を padding-bottom: 20000px; に設定します。margin-bottom: -20000px;