如何在內容頁面中修復高度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％。所以頁腳被推到頁面的底部。

標記，放置這個＃容器是身體的唯一直接的孩子。換句話說，將所有內容放在#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 */ 
}