CSS实现div填充剩余高度

相信小伙伴们经常会遇到这个问题，我也是填了很多坑，查了很多资料，才解决的，下面我列出2个方法：

我们的需求如图：

1：（这个方法不推荐使用，因为可能会因为设备不同，而出现未知BUG，特别是div出现padding的时候）

<div class="main">
    <div class="title"></div>
    <div class="content"></div>
</div>

*{margin:0;padding:0;}
.main{width: %;height: %;}
.title{
    width: %;
    height: 80px;
    background: #29f0bf;
}
.content{
    position: absolute;
    width:100%;
    height: calc(% - 80px);
    background: #f09529;
}

2：（推荐使用该方法）

<div class="main">
    <div class="title"></div>
    <div class="content">sddfsfsdf15646</div>
</div>

*{margin:0;padding:0;}
.main{width: %;height: %;}
.title{
    width: %;
    height: 80px;
    background: #29f0bf;
}
.content{
    width: 100%;
    position: absolute;
    top: 80px;
    bottom: 0px;
    left: 0px;
    background: #f09529;
}

***********************  END  ***********************