html - ヘッダーとフッターの間が 100% のコンテンツ

Question

次のレイアウトがあると仮定しましょう（下の画像を参照）...上部にヘッダー（A）、常に下部にあるフッター（C）、およびコンテナ（B）が中央にあり、ヘッダーとフッターの間のスペースを 100% にします。

純粋なcssを使用してこれを達成する方法は考えられません。どんなアイデアでも大歓迎です！

Answer 1

あなたの質問は、DIVなどの標準的なブロックレベルの要素がどのように動作するかをほぼ説明しています。中央のdivは、常に2つの間のスペースの100％を占め、内部のコンテンツに基づいて拡大します。

そうは言っても、固定フッター（ブラウザーウィンドウの下部に配置されたままのフッター）が必要であると想定します。これは、いくつかの手法を使用して達成できます。そのうちの1つは、絶対的なポジショニングを使用しています。

<div id="header">Header</div> 
<div id="content">Main Content</div> 
<div id="footer">Footer</div> 

スタイル：

#header, #footer, #content { position: absolute; left: 0; width: 100%; }
#header, #footer { overflow: hidden; background: #444; height: 100px; }
#header { top: 0; }
#content { top: 100px; bottom: 100px; overflow: auto; background: #CCC; }
#footer { bottom: 0; }​

http://jsfiddle.net/U9wfy/

Answer 2

height: 100%;ページの設定方法によっては、（B）とposition: absolute;container要素を設定すると機能する場合があります。次に例を示します。

HTML：

<div id="container">
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
</div>​

CSS：

#container {
    height: 100%;
    width: 100%;
    background: green;
    position: absolute;
}
#header, #footer {
    height: 100px;
    width: 100%;
    background: red;
}
#body {
    height: 100%;
    width: 100%;
    background: blue;
}​

jsFiddle