min-height% != height %

It's crazy

A good friend of mine was trying to set the height of a div to 100% of the containing element and also set that to 100% of the available page height, kind of do a background fill in.

Easy fix right?

height: 100%  

Well... that didn't work.

We checked every parent element up to <html> and they all had a height set... so we thought.

Some had height others had min-height set, but all were set to 100%.

Turns out a parent element with min-height: 100% does not allow child elements to expand to 100% of the parent's height.

You have to explicitly set height: 100%

See the Pen gpzdMP by Brannon Lucas (@bral) on CodePen.