In creating full-screen layouts, you will often find yourself wanting an element to have a fluid height. For example, a content column that extends from the top of your layout all the way down to the bottom. In the same way that you can set the width of and element to 100%, you can also set the height to 100%, but there is one main difference--in the browser, the body element is always 100% percent wide, but the height of the body element is, by default, only as tall as the content.

Even if you set the height of the inner div to 100%, it will only stretch 100% vertically until it runs into the parent that it's inside of, which is the body.

See the Pen 36 Fluid Height by Kellye Greene (@FlatironWebDev) on CodePen.

In order to set the element to actually scale 100% percent vertically, you'll also have to set both the body and the html element to have height: 100% and min-height: 100%. That is all that is required! The div and any parent that it happens to be inside of, as well as the body and the html element all need to be set with the height of 100%. Once those properties are set, you can see (with a refresh) that the inner div will expand 100% vertically on the screen.