ヘッダーとフッターの間に100％の内容がある

Question

私は次のレイアウトを持っていると仮定します（下の画像を参照してください）...ヘッダー（A）が上部にあり、フッター（C）が常に下部にあり、コンテナーB）は中央にあり、ヘッダーとフッターの間のスペースを100％埋めなければなりません。

は、この使用して、純粋なCSSを達成するための方法をどのような方法を考えることはできません。任意のアイデアをいただければ幸いです！

Answer 1

ページの設定によっては、（B）にheight: 100%;を、コンテナエレメントにposition: absolute;を設定すると、ページがどのように設定されるかによって異なります。次に例を示します。

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

Answer 2

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

私はあなたがFIXEDフッタを望んでいると言います.1つはブラウザウィンドウの下部に位置しています。これは、位置決め一つはabsolutly使用している多くの技術を、使用してachiavableです：

<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 3

答えが役に立つでしょう。このレイアウトは簡単。..グーグルの時間後

https://www.codeply.com/go/1QgRb4uFmj

<header> 
</header> 
<main></main> 
<footer> 
</footer> 

html, body { 
    margin: 0; 
    height: 100%; 
} 

body { 
    display: flex; 
    flex-direction: column; 
} 

header, 
footer { 
    flex: none; 
    background: #ddd; 
} 

main { 
    overflow-y: scroll; 
    flex: auto; 
}