Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Div fill remaining height [duplicate]

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.

like image 752
Stanley Machnitzki Avatar asked Feb 11 '16 19:02

Stanley Machnitzki


1 Answers

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;
}
<div class="wrap">
  <div class="top"></div>

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

  <div class="bottom"></div>
</div>
like image 130
Jānis Avatar answered Nov 20 '22 07:11

Jānis