Make div (height) occupy parent remaining height

118

http://jsfiddle.net/S8g4E/

I have a container div with two children. The first child has a given height. How can I make the second child to occupy the "free space" of the container div without giving a specific height?

In the example, the pink div should occupy also the white space.


Similar to this question: How to make div occupy remaining height?

But I don't want to give position absolute.

This question is tagged with html css height parent

~ Asked on 2012-06-27 12:13:14

The Best Answer is


169

Expanding the #down child to fill the remaining space of #container can be accomplished in various ways depending on the browser support you wish to achieve and whether or not #up has a defined height.

Samples

_x000D_
_x000D_
.container {_x000D_
  width: 100px;_x000D_
  height: 300px;_x000D_
  border: 1px solid red;_x000D_
  float: left;_x000D_
}_x000D_
.up {_x000D_
  background: green;_x000D_
}_x000D_
.down {_x000D_
  background: pink;_x000D_
}_x000D_
.grid.container {_x000D_
  display: grid;_x000D_
  grid-template-rows: 100px;_x000D_
}_x000D_
.flexbox.container {_x000D_
  display: flex;_x000D_
  flex-direction: column;_x000D_
}_x000D_
.flexbox.container .down {_x000D_
  flex-grow: 1;_x000D_
}_x000D_
.calc .up {_x000D_
  height: 100px;_x000D_
}_x000D_
.calc .down {_x000D_
  height: calc(100% - 100px);_x000D_
}_x000D_
.overflow.container {_x000D_
  overflow: hidden;_x000D_
}_x000D_
.overflow .down {_x000D_
  height: 100%;_x000D_
}
_x000D_
<div class="grid container">_x000D_
  <div class="up">grid_x000D_
    <br />grid_x000D_
    <br />grid_x000D_
    <br />_x000D_
  </div>_x000D_
  <div class="down">grid_x000D_
    <br />grid_x000D_
    <br />grid_x000D_
    <br />_x000D_
  </div>_x000D_
</div>_x000D_
<div class="flexbox container">_x000D_
  <div class="up">flexbox_x000D_
    <br />flexbox_x000D_
    <br />flexbox_x000D_
    <br />_x000D_
  </div>_x000D_
  <div class="down">flexbox_x000D_
    <br />flexbox_x000D_
    <br />flexbox_x000D_
    <br />_x000D_
  </div>_x000D_
</div>_x000D_
<div class="calc container">_x000D_
  <div class="up">calc_x000D_
    <br />calc_x000D_
    <br />calc_x000D_
    <br />_x000D_
  </div>_x000D_
  <div class="down">calc_x000D_
    <br />calc_x000D_
    <br />calc_x000D_
    <br />_x000D_
  </div>_x000D_
</div>_x000D_
<div class="overflow container">_x000D_
  <div class="up">overflow_x000D_
    <br />overflow_x000D_
    <br />overflow_x000D_
    <br />_x000D_
  </div>_x000D_
  <div class="down">overflow_x000D_
    <br />overflow_x000D_
    <br />overflow_x000D_
    <br />_x000D_
  </div>_x000D_
</div>
_x000D_
_x000D_
_x000D_

Grid

CSS's grid layout offers yet another option, though it may not be as straightforward as the Flexbox model. However, it only requires styling the container element:

.container { display: grid; grid-template-rows: 100px }

The grid-template-rows defines the first row as a fixed 100px height, and the remain rows will automatically stretch to fill the remaining space.

I'm pretty sure IE11 requires -ms- prefixes, so make sure to validate the functionality in the browsers you wish to support.

Flexbox

CSS3's Flexible Box Layout Module (flexbox) is now well-supported and can be very easy to implement. Because it is flexible, it even works when #up does not have a defined height.

#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }

It's important to note that IE10 & IE11 support for some flexbox properties can be buggy, and IE9 or below has no support at all.

Calculated Height

Another easy solution is to use the CSS3 calc functional unit, as Alvaro points out in his answer, but it requires the height of the first child to be a known value:

#up { height: 100px; }
#down { height: calc( 100% - 100px ); }

It is pretty widely supported, with the only notable exceptions being <= IE8 or Safari 5 (no support) and IE9 (partial support). Some other issues include using calc in conjunction with transform or box-shadow, so be sure to test in multiple browsers if that is of concern to you.

Other Alternatives

If older support is needed, you could add height:100%; to #down will make the pink div full height, with one caveat. It will cause overflow for the container, because #up is pushing it down.

Therefore, you could add overflow: hidden; to the container to fix that.

Alternatively, if the height of #up is fixed, you could position it absolutely within the container, and add a padding-top to #down.

And, yet another option would be to use a table display:

#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}?

~ Answered on 2012-06-27 12:19:14


25

Its been almost two years since I asked this question. I just came up with css calc() that resolves this issue I had and thought it would be nice to add it in case someone has the same problem. (By the way I ended up using position absolute).

http://jsfiddle.net/S8g4E/955/

Here is the css

#up { height:80px;}
#down {
    height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}

And more information about it here: http://css-tricks.com/a-couple-of-use-cases-for-calc/

Browser support: http://caniuse.com/#feat=calc

~ Answered on 2014-02-20 06:19:02


Most Viewed Questions: