flex实现：上下两个div，一个固定高度，另一个填满剩余高度

1.flex 

<div class="parentDiv">
    <div class="childDiv1"></div>
    <div class="childDiv2"></div>
</div>

.parentDiv{
        border:1px solid black;
        width:100%;
        height:800px;
        display:flex;
        flex-direction: column;
}
.childDiv1{
        background-color: blanchedalmond;
        width:100%;
        height: 200px;
 }
 .childDiv2{
        background-color: #0f8bcb;
        width:100%;
        flex:1;
}

第二种：

 

.parentDiv{
        border:1px solid black;
        width:100%;
        height:800px;
        display:flex;
        flex-direction: column;
}
.childDiv1{
        background-color: blanchedalmond;
        width:100%;
        height: 200px;
        flex:0 0 auto;//不放大或者缩小，维持原始尺寸
 }
 .childDiv2{
        background-color: #0f8bcb;
        width:100%;
        flex:auto;//自动伸缩填满剩余空间
}

2.CSS3calc()函数：

.parentDiv{
        border:1px solid black;
        width:100%;
        height:800px;
}
.childDiv1{
       background-color: blanchedalmond;
       width:100%;
       height: 200px;
}
.childDiv2{
       background-color: #0f8bcb;
       calc(100% - 200px);
}