CSS股利填充剩下的高度

Question

請參閱我jsfiddle

我想綠色中間div填補了包裝div的剩餘空間，不管含量多少了。

如果它很重要我也包括bootstrap。

Answer 1

給容器：

display:flex; 
flex-direction:column; 

和用於元素：

flex:1; 

---

演示： https://jsfiddle.net/ugjfwbg4/1/

body { 
 
    background-color: red; 
 
    height: 100%; 
 
} 
 

 
.wrap { 
 
    height: 100vh; 
 
    width: 100%; 
 
    padding: 20px; 
 
    background-color: yellow; 
 
    display:flex; 
 
    flex-direction:column; 
 
} 
 

 
.top { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: blue; 
 
} 
 

 
.mid { 
 
    width: 100%; 
 
    background-color: green; 
 
    flex:1; 
 
    display:flex; 
 
    flex-direction:column; 
 
} 
 

 
.left{ 
 
    flex:1; 
 
    width: 50%; 
 
    background-color: red; 
 
} 
 

 
.bottom { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: blue; 
 
}

<div class="wrap"> 
 
    <div class="top"></div> 
 

 
    <div class="mid"> 
 
    
 
    <div class="left">left</div> 
 
    </div> 
 

 
    <div class="bottom"></div> 
 
</div>