Creating a Responsive and Sticky Footer

Recently, I encountered a couple of projects that required a responsive adaptation of the age-old CSS sticky footer and was surprised to note how little had been written on the subject.

As an afterthought to several tried and true methods[1][2] of creating sticky footers, I wanted to make something that would support a varying footer height in a responsive layout.

I found some success with the following method:

See the Pen JKKEjJ by Timothy Long (@timothylong) on CodePen.


9/26/2013 – When the flexible box sees widespread browser adoption, it will provide a superior approach to solving this problem. You can see the Flexbox method in action on Philip Walton’s Solved by Flexbox website.