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