需要div来填补两个div之间的空白 [英] Need div to fill gap between two divs

问题描述

给出以下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之间存在间隙.如何设置内容的高度必须为页眉和页脚之间的所有空格?

There is a gap between the content and the footer's div. How can I set that the content's height must be all the space between the header and the footer?

页脚必须在页面底部具有绝对"位置.

The footer has to have the 'absolute' position to position is at the bottom of the page.

推荐答案

尝试使用 display:table ， table-row 选项

display:table 到 #wrapper

display:table-row 到 #header ， #content (此处宽度和高度应为100％)和#页脚

display:table-row to #header, #content (width and height should be 100% here) and #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

DEMO

这篇关于需要div来填补两个div之间的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！