Skip to main content

Creating a stickyfooter with flexbox (and Foundation)

· One min read

The other day I realised I needed to create a stickyfooter for my app. i.e. getting something to always stay at the bottom of the page. This is needed when there is not much content on the page itself.

Probably the most popular method today is using Ryan Fait’s method.

However, this method still requires a fair bit of code, and assumes you know the height of your footer.

I didn’t know the height of my footer as I am dynamically inserting a new quote everytime.

And then I discovered flexbox. It makes solving a lot of traditionally tricky CSS issues rather trivial. Check out Solved by Flexbox to see examples of this.

I really like using Zurb’s Foundation CSS framework, but they don’t offer a standard solution for stickyfooters. I didn’t want to stop using Foundation, and wasn’t sure if flexbox was going to conflict with Foundation’s Grid layout. So I coded something up to test. And it works great..

See the Pen Creating a stickyfooter with flex. by magician11 (@magician11) on CodePen