How to make a floated div 100% height of its parent?

The parent-child bond in CSS: Understanding Flexbox

In the flex world, the .parent div is the flex container and the .child div is the flex item. When you set flex: 1; on the child, you're telling it to grow and occupy all of the space available within the parent, effectively matching its height.

The code speaks multiple browser-languages: Cross-browser compatibility

Flexbox does care about everyone, even every browser. So, to ensure that your layout looks the same across all of them, consider cross-browser compatibility:

.parent {
  display: -webkit-box;  /* "It's me, flex! In old iOS and Safari" */
  display: -moz-box;     /* "Hello there from an old but gold Firefox" */
  display: -ms-flexbox;  /* "Guess who? Flex looking good on IE 10" */
  display: -webkit-flex; /* "Bonjour! Flex from Chrome here" */
  display: flex;         /* "Hola, flex reporting from Opera 12.1 and Firefox 20+" */
}

.child {
  -webkit-box-flex: 1; /* "Child: I'm 100% in old iOS and Safari" */
  -moz-box-flex: 1;    /* "Growing to fullness in the golden Firefox" */
  -ms-flex: 1;         /* "Hey IE 10, I'm head to toe!" */
  -webkit-flex: 1;     /* "Ola! I'm whole in Chrome" */
  flex: 1;             /* "Ciao Opera 12.1, Firefox 20+, full height achieved" */
}


A time travel to IE9 and earlier: Flexbox support

Take note that Flexbox doesn't exist in IE9 and earlier versions. As a fallback method, you may want to go old school using display: table; for the parent and display: table-cell; for the child, mimicking flex-like prowess.

Departing from Flexbox: More ways to match parent height

"I got you covered!" - Absolute Positioning

If Flexbox isn't right for you, find peace in good old absolute positioning:

.parent {
  position: relative;
  /* "Be safe, my child! I've got borders to protect you." */
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* "Mom, look, I can touch all four walls!" */
}


This covers the parent from edge to edge. Just remember that absolute positioning makes the child leave the normal document flow.

A table can be a flexbox too: Table-cell approach

When flexbox and absolute positioning don't fit your schedule, try the display: table; and display: table-cell; approach:

.parent {
  display: table;
  width: 100%; /* "Yes, I'm broad-shouldered to contain my child." */
}

.child {
  display: table-cell;
  /* "Home sweet home, occupying full height of my parent!" */
}


No flex and position manipulation, just plain old table display doing the same magic trick.

Corner cases: Things to keep in mind

Old browser hearty layout: Flex behavior in legacy browsers

If you're haunted by the past (aka older browsers like IE9), you can use polyfills to give them the power of modern features. Or, let your layout gracefully degrade in these environments. They'll appreciate your attention.

No explicit height required, but...

Keep in mind that child elements default to align-self: auto in a flex container. This value will inherit the value of the align-items property set on the parent. By default, align-items: stretch is set, making children fill the container.

Squeeze in through padding

If absolute positioning is your weapon of choice, you can use padding on the parent to ensure it envelops the child comfortably.

Is height really 100%?

When setting height: 100% on an absolutely positioned element, remember that it calculates from the nearest positioned ancestor (not always the direct parent).