I figured this out once, but lost it somewhere, so I’m recording here for sure: How to make a web page attain it’s full height, with a page header, page footer, and a main content section, so the footer will be on the bottom if the main content section is not tall enough.

This was based off a CSS-Tricks article Boxes That Fill Height (Or More) (and Don’t Squish)

Trying some a bit new, am using an embedded gist:


Screen Capture