Ryan Fait's Sticky Footer (but Responsive)

I’ll bet you hate the ubiquitous sticky footer. Clients expect it and you wish nobody cared about it.

Ryan Fait’s pure CSS solution has probably been the most popular one. And this one’s kind of famous too - CSS Sticky Footer.

It's perfect, until you have a responsive site with a nice big footer, that changes height on different screens! Then Ryan Fait’s solution goes out of the window. If you’re comfortable using display: table on your main elements, this one’s actually pretty effective.

Of course, Flexbox solves this once and for all. Here’s a demo by a cool guy to show you how: Unfortunately, Flexbox isn’t supported on IE 9. And it needs a ton of vendor prefixes – which is also fine. The problem is, the syntax is different on older and newer versions. So I would wait a few more months to use flexbox in production code.

A friend and I had worked on a JS sticky-footer solution for a responsive site a year and a half ago, which we were using until recently. To be honest, it was a pretty painful solution. I wouldn’t recommend it.

But a few days ago, I was taking a walk in this pretty garden and an eureka moment occurred. Why not take Ryan Fait’s solution (which is quite elegant, by the way), and add a teeny weeny bit of JS, to get a footer that works for a responsive layout?

If you've used the Ryan Fait solution before, you know that you need an empty ‘push’ div equal to the height of the footer, and you ensure a negative bottom margin is added to the element preceding the footer, to compensate the height of the ‘push’ div. And you write your markup his way, with a few lines of CSS.

The problem with responsive sites is that we don’t wish to set the height of the footer, the push div and the negative margin in our stylesheets, since they would change based on screen size.

You can read Ryan Fait’s solution here, on his site. But don’t set a height to the footer, the push div or a negative margin to the wrap element in your CSS. Instead, use this simple snippet below. (Note: Updated on July 30, 2023 - Ryan Fait's website mentions that he passed away a few years ago, and the above link is no longer active).

I’ve used jQuery in my snippet, which you should include first, and wrap the code below in script tags:

$(document).ready(function(){
    $(window).resize(function(){
        var footerHeight = $('.footer').outerHeight();
	var stickFooterPush = $('.push').height(footerHeight);	
	$('.wrapper').css({'marginBottom':'-' + footerHeight + 'px'});
    });		
    $(window).resize();
});