How to force child div to be 100% of parent div's height without specifying parent's height?

Asked 13 years ago
Viewed 1.13 k times

I have a site with the following structure:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>

<div id="footer"></div>

The navigation is on the left and the content div is on the right. The information for the content div is pulled in through PHP, so it's different every time.

How can I scale the navigation vertically so that its height is the same as the content div's height, no matter which page is loaded?

asked 13 years ago

Correct Answer

For the parent:

display: flex;

You should add some prefixes,

As @Adam Garner noted, align-items: stretch; is not needed. Its usage is also for parent, not children. If you want to define children stretching, you use align-self.

.parent {
  background: red;
  padding: 10px;

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;

.child {  
  width: 100px;
  background: blue;
<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  <div class="child"></div>
answered 4 years ago

Other Answer

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see:

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

answered 13 years ago