相信小伙伴们经常会遇到这个问题，我也是填了很多坑，查了很多资料，才解决的，下面我列出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填充剩余高度
原文地址：https://www.cnblogs.com/silent007/p/8778487.html