CSS Div điền còn lại chiều cao

Question

Hãy xem tôi jsfiddle

Tôi muốn các màu xanh lá cây giữa div để lấp đầy khoảng trống còn lại của wrapper div bất kể có bao nhiêu nội dung nó có.

Nếu nó quan trọng, tôi cũng bao gồm cả bootstrap.

Answer 1

Cho container:

display:flex; 
flex-direction:column; 

và cho các phần tử:

flex:1; 

---

Bản demo: 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>