我正在尝试实施建设,描述here。
<div id="wrap">
<div id="header">
header
</div>
<div id="main">
main<br/>main<br/>main<br/>main<br/>main<br/>main<br/>
</div>
</div>
<div id="footer">
footer
</div>
#header {
border-top:20px solid #fff;
height: 33px;
line-height: 33px;
text-align: center;
}
html { height: 100%; }
body { height: 100%; width: 90%; margin: auto; }
#wrap { min-height: 100%;background-color:gray;}
#main {
overflow: auto;
padding-bottom: 53px; /* must be same height as the footer */
background-color: red;
border: solid 1px blue;
height: 90%;
}
#footer {
position: relative;
margin-top: -53px; /* negative value of footer height */
height: 33px;
line-height: 33px;
border-bottom:20px solid #fff;
text-align: center;
}
</p>
整个页面有背景色(灰色),页眉和页脚是透明的(所以你可以通过它看到页面的背景),内容块有红色背景。尽管内容部分是可拉伸的,但它并没有填充整个块的背景,只有实际的。
- 是否可以用颜色填充整个内容块?
- 在最小化窗口时,页脚浮动在内容上。是否可以禁用这种行为?