CSS Div fill Resthöhe

Question

Bitte beachten Sie meine jsfiddle

Ich möchte die grüne Mitte div den verbleibenden Raum der Hülle füllen div egal wie viel Inhalt hat.

Wenn es wichtig ist, schließe ich auch Bootstrap ein.

Answer 1

Geben Sie den Container:

display:flex; 
flex-direction:column; 

und für das Element:

flex:1; 

---

Die 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>