Problem：父元素内包含两个子元素，一个定高，另一个高度自适应

Ans：

<div class="box">
    <div class="ele1"></div>
    <div class="ele2"></div>
</div>

（1）
  .box {
      width:200px;
      height:300px;
      background:red;
      display:flex;
      flex-direction:column;
  }
   .ele1 {
      height:100px;
      background:green;
  }
    .ele2 {
       background:blue;
       flex:1;
   }
 （2）

.box {     width:100px;     height:300px;     background:red;     position:relative;  }  .ele1 {     height: 100px;     background:green;  }  .ele2 {     background:blue;     width:100px;     position:absolute;     top:100px;     bottom:0;  }

（3）

html, body {     height: 100%;     padding: 0;     margin: 0; } .box {       height: 100%;} .ele1 {     height: 100px;     background:purple; } .ele2 {     height: calc(100% - 100px);     background:blue; }

（4）

html, body {     height: 100%;     padding: 0;     margin: 0; } .box {     height: 100%;     padding: 100px 0 0;     box-sizing: border-box ;     position: relative; } .ele1 {     height: 100px;     background: #BBE8F2;     position: absolute;     top: 0 ;     left: 0 ;     width: 100%; } .ele2 {     height: 100%;     background: #D9C666; }

（5）

html, body {     height: 100%;     padding: 0;     margin: 0; } .box {     height: 100%;     position: relative; } .ele1 {     height: 100px;     background:purple; } .ele2 {     background:blue;     width: 100%;     position: absolute;     top: 100px ;     left: 0 ;     bottom: 0; }

参考：https://segmentfault.com/q/1010000000762512

一个定高，一个高度自适应的布局