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