给定以下 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 之间有间隙。如何设置内容的高度必须是页眉和页脚之间的所有空间?
页脚必须具有“绝对”位置才能位于页面底部。
尝试使用display:table
, table-row
options
display:table
to #wrapper
display:table-row
to #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 http://jsfiddle.net/t6EKv/332/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)