How to keep that footer at the bottom.
One of the more frustrating things that I remember having to deal with in my earlier web design creations is trying to get the footer to stay at the bottom of the browser’s window even if there wasn’t enough content to push it to the bottom. However, if I had more content than the size of the display view, I wanted the footer to stay at the bottom of the content. To be clear, I didn’t want the footer to be floating and covering up content, I just wanted it to be at the end of content or at the bottom of the display if there wasn’t enough content to fill the display.
This type of footer is affectionately known at the “The Sticky Footer.” There are lots of options out there that I’ve used in the past that have worked very well, but there can be some limitations – mainly that you are working under the assumption that the footer has a fixed height. Not necessarily a deal breaker, but not that the greatest thing for today’s responsive designs. These solutions make it difficult to plan around changes in footer height due to the changing size of the contents within it.
From Footer Problems to Footer Solutions: Flexbox!
Flexbox is a new-ish formatting spec that came into existence around 2009 and has gone through several iterations before landing on the specification in 2012 that we use today. The flexbox implementation looks like this:
HTML:
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
CSS:
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
This is the cleanest and version of the Sticky Footer that I’ve seen. Thanks Flexbox!
As awesome as this is, there can still be downside – remember that little mention about the iterations of the flexbox spec? It can make for a ton of additional browser prefixes added to your CSS if you have to support the older browsers.
Wanna know more? CSS tricks has a great post covering the 5 versions of the sticky footer here Sticky Footer, Five Ways and there are some other great articles to brush up on the flexbox with Are We Ready to Use Flexbox? and this one on Using Flexbox: Mixing Old and New for the Best Browser Support.
Let me know what you use for your Sticker Footer solutions below!
Cheers!
-Matthew Vazquez