If you work on almost any site design, you’ll run into a fun little problem: short pages, and the footers that hate them.

Footers should be at the bottom of the page. Not just hanging out at the bottom of your content, but at the foot of your viewport. Nice and orderly, always in the same spot, no matter the height of the page, rather than just wandering to and fro up the screen like barbarians.

To manage that in the past has been a minor nightmare, because typically you need to know the height of your footer. Particularly if you are working in a responsive setting, that height can vary widely. Here’s a nice little example from Ryan Fait of setting up a sticky footer using negative bottom margins based on the height of the footer.

I didn’t want to deal with any of that nonsense, and I remembered a nice site from Phillip Walton, Solved by Flexbox. I have been very intrigued by Flexbox, because it makes a lot of terrifying front end development tasks a piece of cake. And sure enough, Phillip had a Flexbox Sticky Footer example.

It’s really just unfair how few lines of code it takes to solve this perennial problem.

Step one: I added a few lines to an element that wrapped all of my layout regions. For me, the body element. If you are using a wrapper div, you may want to use that. Here goes:

body { display: flex; min-height: 100vh; flex-direction: column; }

A few notes:

• Setting the body to display: flex lets us use flexbox techniques with body’s child elements.
• We set the flex-direction to column, as the child elements with this layout are stacked vertically. That is probably pretty typical for a lot of layouts.
• We set the minimum height for this element to 100vh, which is 100% of the viewport height. That ensures that we are using the full viewport, so that our footer can appear at the bottom of the viewport.

One last thing. I added the following to my main content region:

.layout-main { flex: 1; }

The flex: 1 says that this element gets to have any extra space left over as the parent element flexes in size. If you have multiple elements with a flex value, they get to split that extra space. You can determine how that space is split by assigning different values to flex for each element.

Anyhow, I didn’t need to worry about these details, as I only had one element that would be taking any extra space in the viewport.

So with that, my header sits at the top of my viewport, followed by my menu bar, then my main content area (which can flex in size), and finally the footer, which will always be at the bottom of the viewport.

What about browsers that don’t understand flexbox?

The good news is that for the limited way that I am using flexbox, it’s not a disaster if a browser doesn’t support flexbox. The worst that happens is that my footer isn’t at the bottom of the page. Since this is my personal site, I’m not that worried. For a commercial site, you may want to build in more fallback support.

Flexbox does have pretty good support right now, but it took a couple tries before the spec settled down for flexbox, so there are some older browsers that understand a different syntax for flexbox. How do we handle that?

I’m using Sass for pre-processing my site’s styles, and I’m compiling those styles using Grunt, a handy task runner that can run multiple command line tasks for you. So I just type grunt build and a number of processes run to get my front end files all spruced up and ready to go.

I had been itching to add a new task to my Gruntfile (the list of tasks that Grunt does): Autoprefixer. If you have ever been annoyed with vendor prefixes for CSS properties, then Autoprefixer is something you might just love. CSS Tricks has a nice write-up on Autoprefixer.

The short version is that nobody in their right mind wants to try to remember which CSS properties require vendor prefixes for fallbacks, and which do not. That way lies madness. Compass has a number of Sass mixins for handling vendor prefixes, but in my mind that isn’t much better, as you still need to remember which properties need to use the Compass mixins.

With Autoprefixer, you just don’t worry about it at all. Autoprefixer scans your CSS, and checks it against a database with information from caniuse.com, a fantastic resource detailing which CSS features are supported by which browsers. Then Autoprefixer applies the necessary vendor prefixes to your CSS based on your settings. Autoprefixer can apply vendor prefixes for browsers that have a certain percentage of users, or for a certain number of previous browser versions, or for specific versions of IE. Set up your preferences and never worry again.

Autoprefixer handles Flexbox just fine. So for me that’s a good enough fallback for these sticky footers. If you want to support some really old browsers, well, that’s on you. Like I said, the worst that can happen is the footer appears a bit higher in the viewport on pages with very little content.

I’m looking forward to trying out more ways to use Flexbox. Two resources I plan to refer to often are a presentation from Zoe Mickley Gillenwater, Leveling Up With Flexbox, and Chris Coyier’s Complete Guide to Flexbox.

This “short” writeup ended up being a bit longer than I expected, but I hope you might find it helpful. I’ll try to share more of these tidbits on new things I’ve tried. Have a great day!