Alex Rivera | Logout

Make div (height) occupy parent remaining height

Asked 2012-06-27T12:13:14.703
173

Consider the following HTML/css code sample:

<div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="down">Text<br />Text<br />Text<br /></div>
</div>

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; }
#down { background:pink;}

where I have a container div with two children (also here: http://jsfiddle.net/S8g4E/). 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.

html css height parent
Edit
Report

2 Answers

237

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.

Note (2024): CSS now has max-content property value for sizing as well, so if you don't have a fixed height (e.g. 100px) then you might be able to use that.

Samples

.container {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  float: left;
}
.up {
  background: green;
}
.down {
  background: pink;
}
.grid.container {
  display: grid;
  grid-template-rows: 100px;
}
.flexbox.container {
  display: flex;
  flex-direction: column;
}
.flexbox.container .down {
  flex-grow: 1;
}
.calc .up {
  height: 100px;
}
.calc .down {
  height: calc(100% - 100px);
}
.overflow.container {
  overflow: hidden;
}
.overflow .down {
  height: 100%;
}
<div class="grid container">
  <div class="up">grid
    <br />grid
    <br />grid
    <br />
  </div>
  <div class="down">grid
    <br />grid
    <br />grid
    <br />
  </div>
</div>
<div class="flexbox container">
  <div class="up">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
  <div class="down">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
</div>
<div class="calc container">
  <div class="up">calc
    <br />calc
    <br />calc
    <br />
  </div>
  <div class="down">calc
    <br />calc
    <br />calc
    <br />
answered 2012-06-27T12:19:14.870
2

check the demo - http://jsfiddle.net/S8g4E/6/

use css - 

#container { width: 300px; height: 300px; border:1px solid red; display: table;}
#up { background: green; display: table-row; }
#down { background:pink; display: table-row;}
answered 2012-06-27T12:20:22.673

Your Answer