相信小伙伴们经常会遇到这个问题,我也是填了很多坑,查了很多资料,才解决的,下面我列出2个方法:
我们的需求如图:
1:(这个方法不推荐使用,因为可能会因为设备不同,而出现未知BUG,特别是div出现padding的时候)
<div class="main"> <div class="title"></div> <div class="content"></div> </div>
*{margin:0;padding:0;}
.main{width: 100%;height: 100%;} .title{ width: 100%; height: 80px; background: #29f0bf; } .content{ position: absolute; width:100%; height: calc(100% - 80px); background: #f09529; }
2:(推荐使用该方法)
<div class="main"> <div class="title"></div> <div class="content">sddfsfsdf15646</div> </div>
*{margin:0;padding:0;}
.main{width: 100%;height: 100%;} .title{ width: 100%; height: 80px; background: #29f0bf; } .content{ width: 100%; position: absolute; top: 80px; bottom: 0px; left: 0px; background: #f09529; }
*********************** END ***********************