How Can I Make a Child Div Occupy the Remaining Height of Its Parent?

How to Make a Div Occupy Parent's Remaining Height

Consider the following HTML and CSS code:

<div>
<pre class="brush:php;toolbar:false">#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; }
#down { background:pink;}

Here, we have a container div with two child elements. The first child (#up) has a given height, while the second (#down) does not. How can we make #down occupy the remaining height of the container div?

Solution

Several methods can achieve this, depending on browser compatibility and whether #up has a fixed height.

Options:

1. Grid Layout:

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

2. Flexbox Layout:

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

3. Calculated Height:

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

4. Overflow Hidden:

.container {
  overflow: hidden;
}
.container .down {
  height: 100%;
}

The choice of method depends on the specific requirements and browser support. Note that CSS now includes the max-content property value for sizing, which may be suitable in certain scenarios.