Tagged with flex

Tue Dec 12, 2017 5:00 PM
When your content doesn't fill the page, the footer won't stay at the bottom of the page by default.  There are a lot of solutions available to solve this with javascript, CSS tables, and using .fixed.  I don't like these hacky solutions that provide inconsistent results.  Using CSS flex, you can achieve the desired results consistently using only CSS. First, add a class to your body. I prefer to use the site name for easier file searching. In this case, let's name it sample. <body class="sample-body"> ... </div> Next, wrap your content like so: <body class="sample-body"> <div class="sample-content"> ... </div>  ...more