コンテンツページの高さを100％に固定する方法は？ CSSとDiv

Question

コンテンツページの高さを100％に固定する方法は？ CSSとDiv

Header=72px 
Content Height=100% 
footer=72px 

私は100％フルスクリーンのコンテンツの高さを修正したいと思います。 よろしく

Answer 1

コンテンツがdiv要素である場合

<div id="container"> 
<div id="header"> 
</div> 
<div id="content"> 
</div> 
<div id="footer"> 
</div> 
</div> 

div#container 
{ 
height: 100%; 
} 

div#header 
{ 
height: 72px; 
} 

div#content 
{ 
height: 100%; 
} 

div#footer 
{ 
height: 72px; 
} 

Answer 2

私が正しく理解していれば、私はあなたがそれぞれのヘッダとフッタは72px高くなりたいと思うし、内容を次のように、それに高さを与えます残りのスペースの100％を占有します。したがって、フッターはページの下部にプッシュされます。

マークアップ、これは#containerがボディの直接の子です。つまり、#header、#body、#footerの中にすべてのコンテンツが配置されています。

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

スタイル

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    padding:10px; 
    height:72px; 
} 
#body { 
    padding:10px; 
    padding-bottom:72px; /* Height of the footer */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:72px; /* Height of the footer */ 
}