Search code examples
csspositionheight

3 divs occupying all the height of parent, first and last div variable height

I have been trying to implementing the following design:

enter image description here

Using javascript, I have easily succeed. I tried to implement the same behavior but without any Javascript, using only CSS, and I failed. I would like to know if it was possible.

My current implementation is based on divs, but it could be any other html element (table, etc.)

<div id="parent">
  <div id="one">
   Some variable content
  </div>
  <div id="two">
    Should occupy the remaining height
  </div>
  <div id="three">
    Some variable content
  </div>
</div>

Here is a JSFiddle implementing the basis.

Thanks for your help.

Solution

  • Cheers! Yes, you can use flex. It's simple and straightforward, set the container to display:flex, then you can specify which of container children have to grow and which have not, with flex-grow attribute. 

    #parent {
  display: flex;
  flex-direction: column;
}

#one, #three {
 flex-grow: 0;
}

#two {
  flex-grow: 1;
}

    See the updated fiddle: https://jsfiddle.net/ypzd68wv/3/

    PS: Check your minimum browser support requirements ;) http://caniuse.com/#feat=flexbox