我怎么能height: calc(100% - 18px);在CSS2中做？我div在页面上有3 个.
<body>
<div id="top">top</div>
<div id="middle">middle</div>
<div id="bottom">bottom</div>
</body>
top100%身高减去200pxmiddle成为200px并且就在下面topbottom紧接着bottom我的想法是,当滚动条位于最顶端时top,middle占据浏览器窗口的100%,但用户应该可以向下滚动查看bottom.当用户滚动top并且bottom仍然是相同的大小时(除非用户调整窗口大小).
我想在没有JavaScript的情况下这样做,它需要是CSS2,因为我们还没有CSS3兼容的浏览器.
你可以使用负边距和填充的混合来做到这一点box-sizing: border-box.
注:在下面的例子中,我用50px,而不是200px作为200px是为片断输出有点过大.你会想改变的情况下-50px,并50px以-200px和200px为您所需的输出.
html, body {
height: 100%;
margin: 0;
}
#top {
background: tomato;
box-sizing: border-box;
height: 100%;
margin-bottom: -50px;
padding-bottom: 50px;
}
#middle {
background: cornflowerblue;
height: 50px;
}
#bottom {
background: papayawhip;
}<div id="top">top</div>
<div id="middle">middle</div>
<div id="bottom">bottom</div>| 归档时间： |
|
| 查看次数： |
225 次 |
| 最近记录： |