问题:
大盒子高度为100%,不能出现纵向滚动条,上盒子高度为100px,下盒子填充剩余高度
回答:
解决方案(1)绝对定位;(2)box-sizing、margin;(3)calc。
公共代码
html代码:
1 2 3 4
| <section class="layout"> <div class="top"></div> <div class="bottom"></div> </section>
|
css代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| * { padding: 0; margin: 0; } html, body { width: 100%; height: 100%; } .layout { width: 100%; height: 100%; background: #000; } .top { width:100%; height: 100px; background: #099; } .bottom { background: #ff9800; }
|
方案一:绝对定位
1 2 3 4 5 6 7 8 9 10
| .layout { position: relative; } .bottom { position: absolute; top: 100px; right: 0; bottom: 0; left: 0; }
|
方案二:box-sizing、margin
1 2 3 4 5 6 7 8 9 10
| .layout { box-sizing: border-box; padding-top: 100px; } .top { margin-top: -100px; } .bottom { height: 100%; }
|
方案三:calc
1 2 3 4 5 6 7 8 9 10 11
| html, body, .layout { width: calc(100%); height: calc(100%); }
.bottom { height: calc(100% - 100px); }
|