Css Div Fill Remaining Height
Please see my jsfiddle I want the green middle div to fill the remaining space of the wrapper div no matter how much content it has. If it matters I'm including bootstrap too.
Solution 1:
Give the container:
display:flex;
flex-direction:column;
and for the element:
flex:1;
The 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;
}
<divclass="wrap"><divclass="top"></div><divclass="mid"><divclass="left">left</div></div><divclass="bottom"></div></div>
Post a Comment for "Css Div Fill Remaining Height"