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 - http://www.cssstickyfooter.com.

It's perfect, until you have a responsive site with a nice big footer, that changes height on different screens! Then Ryan Fait’s (and most CSS solutions except for this one using display: table go 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.

I’ve used jQuery, 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();
});

I’ve put up a basic demo here, which you can see, and also have the code up here on Codepen, embedded below.

Do note that I've used box-sizing: border-box universally in the demos.

Test, use and enjoy. And let me know if you find bugs.

See the Pen Responsive CSS Sticky Footer with a touch of jQuery by Karen Menezes (@imohkay) on CodePen.