我正在尝试实现构造,描述 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;
}
整个页面有背景颜色(灰色),页眉和页脚是透明的(所以你可以通过它看到页面的背景),内容 block 有红色背景。尽管内容部分是可拉伸(stretch)的,但它不会填充整个 block 的背景,只会填充实际的背景。
- 是否可以用颜色填充整个内容 block ?
- 在最小化窗口时,页脚 float 在内容上。是否可以禁用此类行为?
最佳答案
Here 是您正在寻找的解决方法。希望这会有所帮助。
关于html - 垂直拉伸(stretch) div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11946410/