How to Make a Div Occupy Remaining Parent Height Without Absolute Positioning?

Make Div Occupy Remaining Parent Height Without Absolute Positioning

In HTML/CSS, you often encounter a scenario where a child div needs to occupy the remaining height of its parent container without explicitly setting a specific height. Let's delve into the problem and its possible solutions.

Consider the following HTML/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, the "down" div should occupy the whitespace below the "up" div.

Solution

There are several methods to achieve this:

Grid:

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

Flexbox:

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

Calculation:

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

Overflow:

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

Note:

• For browsers that support CSS Grid and Flexbox, these solutions provide a more elegant approach.
• The "Overflow" method can be useful when the parent container has a fixed height. However, it may cause unexpected scrolling behavior.