需要股利两个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!