web-dev-qa-db-fra.com

CSS Div remplir la hauteur restante

Veuillez voir mon jsfiddle

Je veux que le milieu vert div remplisse l'espace restant du wrapper div quel que soit le contenu.

Si cela importe, j'inclus bootstrap aussi.

htmlcsscss3alignment
19
Stanley Machnitzki

Donnez au récipient:

display:flex;
flex-direction:column;

et pour l'élément:

flex:1;

La démo: 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>
27
John