有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。

<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; }