html - 上部と下部の高さが固定され、中央の高さが動的になるように 3 つの div を作成しますか?

Question

積み上げられた 3 つの s を作成したいと思いますdiv。上部と下部の高さは固定されますが、中央の高さは動的な高さになり、残りのスペースを埋めるように拡張されます。

高さを に設定するなど、さまざまなことを試しましたauto。解決策はありますが、JavaScript (つまり、残りの高さの計算) が必要ですが、純粋な CSS ソリューションがあるかどうか疑問に思っていました。

Answer 1

CSS ソリューションがありますが、古いブラウザーでは機能しません。calcと組み合わせて、CSS に新しい「関数」を使用する必要がありますheight: 100%。以前に使用したことがない場合はheight: 100%、高さを 100% にしたい要素のすべての親要素も に設定する必要があることを知っていますheight:100%。calcパーセンテージ値を取り、そこからピクセルを差し引くことができるので100%、上と下の div の高さがマイナスになるように設定するだけです。

サポート対象: IE9 以降、Firefox 4 以降、Chrome 19 以降、Safari 6 以降 http://caniuse.com/calc

HTML

<div id='top'></div>
<div id='mid'></div>
<div id='bot'></div>

CSS

html, body
{
    height: 100%;
}

#top, #bot
{
    height: 50px;
    background: red;
}

#mid
{
    height: calc(100% - 100px);
}

フィドル: http://jsfiddle.net/jakelauer/9cYUB/

Answer 2

古いブラウザーのサポートが必要な場合は HTML テーブルを使用できます。IE8+ 以降をサポートする必要がある場合は、CSS テーブル レイアウト を使用できます。

jsFiddleCSS テーブル レイアウトを使用した例を次に示します。

HTML

<div>
    <div>
        <div>Fixed Height</div>
    </div>
    <div>
        <div>
            <div>Variable Height</div>
        </div>
    </div>
    <div>
        <div>Fixed Height</div>
    </div>
</div>

CSS

html, body {
    height:100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;
    font-size: 20pt;
    font-family: Verdana;
}
body > div {
    display:table;
    width: 100%;
    height:100%;
}
body > div > div {
    display: table-row;
}
body > div > div > div {
    display: table-cell;
    vertical-align: middle;
}
body > div > div:nth-child(odd) {
    background: grey;
    color: #FFF;
    height: 100px;
}
body > div > div:nth-child(even) {
    height:100%;
    width:100%;
}
body > div > div:nth-child(even) >div {
    height:100%;
    width:100%;
    overflow:hidden;
}