flexbox sticky footer

Flexbox Sticky Footer

This post is about code + development. It acts as an area to share what I’m learning as I code the themes in the design 2 + code 1 project. You’ve been warned.


Drum roll!! … Did you do it? Yes? Okay good :)

The design I’ve chosen to code is design two. For no other reason than I absolutely love how bold it is and how beautiful images will look.

So that’s that. I’m just digging into the code now, and learning a ton of new things along the way.

If you’ve been following this blog, one of my older posts was about sticky footers. In it I shared a [kind of] hacked together way to make the footer of a website stick to the bottom of the window when the content wasn’t long enough to push it there on it’s own. (If the content is longer than the height of the window, this isn’t a problem and the footer disappears off down to the bottom, where you find it when you scroll all the way down).

Since then, I’ve learned a better way. (That statement makes it sound like I’ve known this better way for a while now. Not true – I actually learned this better way today. Honesty = awesome.)

This better way utilizes the Flexbox Layout module, which is used to organize items in a container even when their size is unknown and/or changing (thank CSS-Tricks and not me; that’s almost a direct quote from this awesome Guide to Flexbox, which I basically learned everything I know from).

So the great thing is that this will work with a footer whose height can become larger (imagine there was a vertical menu in the footer and you added a menu item. Result = taller footer).

Depending on how I design my code (yes, code gets designed too), it’s likely that both my header and footer will be dynamic. You might not see it right away. But imagine a situation in which the title of the website (I used my name in the design mock ups) was really long. In order for it to fit horizontally on the page in only one line, the font-size would become smaller. At which point the footer would become shorter, because the footer is only as tall as the font is.

Design 2 Index Bottom

Sticking with me?

So my old sticky footer technique was pretty rough. Not refined at all. This new technique? It’s awesome.

The bonus is that you can make fantastic responsive layouts using Flexbox. I plan on trying it out with this theme, so using a flexbox sticky footer is the way to go.

I drew up this picture of how the flexbox sticky footer works (and yes, I had fun doing it with my Pencil):

Flexbox Sticky Footer

Imagine the flex container to hold everything you can see on a website. Using the flexbox sticky footer method, we make sure that this container is at least as large as the window (if it’s larger, that’s zero problem).

The orange writing is labels / rough HTML.

The grey writing is CSS properties.

The blue writing is notes.

The green writing is my conclusion / overall description of the concept.


Disclaimer: I haven’t actually had a chance to try this out with real code yet. Everything I’ve learned is still theoretical to me. You’ll likely find out how implementing this concept went next Saturday, when I (fingers crossed) finish coding the theme. 

Until then, I’ve got a lot of work to do. Take care!