如何在内容页面中修复高度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 */ 
}