By Chris Langtiw
December 10th, 2017

One question I get every so often is how to extend your page layout to the height of the viewport. When you don’t have a lot of content on the page, the height of your layout often is too short to cover the entire viewport. The result is that your footer is in the middle of the screen. Needless to say, this looks pretty strange.

I wrote an article published on the Training Connection site that explains how to create a full-height layout. The secret is in how the browser sets the min-height property’s value.

A caveat

Once caveat I found recently when using this is that it doesn’t work when using Flexbox or CSS Grid. I’ll write a followup article addressing that later.