css布局之上下两行布局(上面固定高度，下面自适应)

方法一： 利用position绝对定位+BFC
html:

css:

*{
  margin:0;
  padding:0;
}
html,body{
   width:100%;
   height:100%;
}
.wrap{
  width:100%;
  height:100%;
}
// 固定高度
.wrap-t{
  width:100%;
  height:100px;
  backgroud-color:red
}
// 自适应高度
.wrap-b{
   position:absolute;
   width:100%;
   top: 100px;
   bottom:0;
   background-color:yellow;
}

方法二：flex布局

html:

css:

*{
    margin:0;
    padding:0
 }
 html,body{
    width:100%;
    height:100%;
 }
.wrap{
    width:100%;
    height:100%;
    display: flex;
    flex-direction: column;
 }
 .wrap-t{
    width:100%;
    height:100px;
    background-color:darkred;
  }
  .wrap-b{
    width:100%;
    flex:1;
    background-color: #FFA500;
   }