需要 div 来填补两个 div 之间的空白答案

【问题标题】：Need div to fill gap between two divs需要 div 来填补两个 div 之间的空白
【发布时间】：2013-04-18 18:48:42
【问题描述】：

给定以下 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 之间存在间隙。如何设置内容的高度必须是页眉和页脚之间的所有空间？

页脚必须有“绝对”位置才能定位在页面底部。

【问题讨论】：

免费小提琴 - jsfiddle.net/Jfsak/1

标签： html css

【解决方案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

【讨论】：

【解决方案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!

【讨论】：