有一个div中包含两个div，一个固定高度，另一个填满剩余高度

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

1. flex弹性布局：

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

2. 定位：

.parentDiv{
        border:1px solid black;
        width:100%;
        height:800px;
        position:relative;
}
.childDiv1{
       background-color: blanchedalmond;
       width:100%;
       height: 200px;
}
.childDiv2{
       background-color: #0f8bcb;
       position:absolute;
       top:200px;
       left:0;
       right:0;
       bottom:0;
}

3. CSS3calc()函数：

calc() 函数用于动态计算长度值。
任何长度值都可以使用calc()函数进行计算；运算符前后都需要保留一个空格；calc()函数支持 “+” , " - " , " * " , " / " 运算；

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

4. js

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


var parentDivH=$(".parentDiv").height();
var childDiv1H=$(".childDiv1").height();
$(".childDiv2").css("height",parentDivH-childDiv1H);