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

Posted 2020-09-18 艳阳天

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