需要使用div填补两个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之间存在间隙。我该如何设置内容区域的高度，使其占据页眉和页脚之间的所有空间？

页脚必须采用“绝对”定位以将其定位在页面底部。

- Kaj

---

免费的小提琴 - http://jsfiddle.net/Jfsak/1/ - Arkana

Answer 1

尝试使用display:table和table-row选项。 将#wrapper的display属性设置为table。 将#header、#content（宽度和高度应为100%）和#footer的display属性设置为table-row。

#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

- Sowmya

Answer 2

这是因为您的页脚具有bottom:0和其位置为absolute。这将使其固定在底部。

您应该像这样为内容设置最小高度和最大高度：

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

}

然后将页脚的位置改为relative 查看这个 fiddle :) Check me!

- DiederikEEn