需要股利兩個div

Question

考慮下面的HTML之間的空隙填充：

<div id="wrapper"> 
<div id="header">*header*</div> 
<div id="content">*content*</div> 
<div id="footer">*footer*</div> 
</div> 

下面CSS：

#wrapper { 
min-height:100%; 
position:relative; 
} 
* {margin:0;padding:0;height:100%;} 
#header { 
    width:100%; 
    height:auto; 
    margin-top: 0; 
} 
#content { 
    width:100%; 
    height: auto; 
    margin:0; 
    margin-top:0; 
    margin-bottom:0; 
} 
#footer { 
    width:100%; 
    height:auto; 
    position:absolute; 
    margin-top: 0; 
    margin-bottom: 0; 
    bottom:0; 
    left:0; 
} 

還有就是內容和頁腳DIV之間的間隙。我如何設置內容的高度必須是頁眉和頁腳之間的所有空間？

頁腳必須具有「絕對」位置才能位於頁面的底部。

Answer 1

嘗試使用display:table,table-row選項

display:table到#wrapper

display:table-row到#header，#content（寬度和高度應該在這裏的100％）和#footer

#wrapper { 
    min-height:100%; 
    position:relative; 
    display: table; 
    width:100% 
} 

#header { 
    width:100%; 
    height:auto; 
    margin-top: 0; 
    background:#dbfcd6; display: table-row; 
} 
#content { 
    width:100%; display:table-row; background:green; height:100% 
} 
#footer { 
    width:100%; 
    height:auto; 
    position:absolute; 
    margin-top: 0; 
    margin-bottom: 0; 
    bottom:0; 
    left:0; background:yellow; 
    display: table-row; 
} 

DEMO

Answer 2

這是因爲你的頁腳有一個底部：0和它的位置是絕對的。這將使它卡在底部。

你應該給你的內容的最小高度和最大高度是這樣的：

#content { 
background-color:red; 
width:100%; 
min-height:450px; 
max-height: auto; 
margin:0; 
margin-top:0; 
margin-bottom:0; 

}

然後頁腳的位置改變到relative

看看這個小提琴： ）Check me!