码迷,mamicode.com
首页 > Web开发 > 详细

CSS实现div填充剩余高度

时间:2018-04-10 15:12:44      阅读:278      评论:0      收藏:0      [点我收藏+]

标签: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  ***************************************************

 

CSS实现div填充剩余高度

标签:pre   解决   填充   问题   bottom   设备   width   高度   推荐   

原文地址:https://www.cnblogs.com/silent007/p/8778487.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!