<div class="content">
<div class="top"></div>
<div class="bottom"></div>
</div>
//方法1,绝对布局
*{ margin: 0; padding: 0;}
.content{ width: auto; height: 200px;//演示方便,所以设置了一个高度 border: 5px solid #000; position: relative;}
.top{ height: 100px; background: red;}
.bottom{ position: absolute; top: 100px; right: 0px; left: 0px; bottom: 0px; background: green;}
//方法2,flex
.content{ display: flex; flex-flow: column wrap; 纵向不换行 border: 1px solid blue; }
.top{ height: 100px; background: red; }
.bottom{ flex:1; background: green; }