Responsive Dynamic-Height Sticky Footers

I spent years trying to get things right with pure CSS alone. I can no longer calculate how many hours I've spent browser testing IE8 and up. And I'm always left asking myself, "Why is this so hard?"

The answer is, because we make it so.

We deny ourselves the tools we need to do simple things.

Want to horizontally and vertically center an element of dynamic height? CSS doesn't have a cross-browser answer without using hundreds of nested elements. We can easily create JavasScript sticky footers in a few lines of code.

So why are we afraid of JS so much?

Almost every meaningful website in the world relies on it. Some, like Facebook, won't even try to function without it.

I'd wager only around 1% of internet users don't have JavaScript enabled. So let's stop worrying about them for a minute and devote the time saved trying to engineer crafty solutions with a bunch of markup & cross-browser fixing to make the rest of our websites better in other ways.

Remember all the Googling you've done for a jQuery sticky footer with a dynamic height footer?

When I put down the "CSS only" approach, this took a couple minutes.

First, let's borrow Bootstrap's pretty solid approach for using a dynamic height in css.

In essence, they're:

• assigning
  position: relative; min-height: 100%
  to the
  html
  selector
• making a footer with a set height
• assigning
  margin-bottom
  of whatever that set height was to
  body

This works fine if you know the height of the footer, and this solution has been around for several years, but what if we want to put some dynamic content in our footer? What if we want to list blog post titles down there without truncating them? We need to set that

JavaScript to the rescue!

First, let's write some jQuery that will do that. Be sure to use 1.*.* version of jQuery so we can support jQuery for the most popular version of Internet Explorer *.

$("body").css("margin-bottom", $(".footer").height());

Great, that's it. Add whatever content you want to your footer, and body, and everything works.

But let's go one step further and make it responsive. Right now if you're on a tablet and flip that puppy sideways, you'll still have the portrait

How about we wrap our code into it's own function and then fire it every time the window is resized?

var bumpIt = function () {
  $("body").css("margin-bottom", $(".footer").height());
};
$(window).resize(function () {
  bumpIt();
});

That works, but let's go a bit further and make sure this isn't firing every single pixel that's resized by implementing a really simple throttle written by none other than John Resig (you know, the guy who created jQuery).

var bumpIt = function () {
    $("body").css("margin-bottom", $(".footer").height());
  },
  didResize = false;

bumpIt();

$(window).resize(function () {
  didResize = true;
});
setInterval(function () {
  if (didResize) {
    didResize = false;
    bumpIt();
  }
}, 250);

To summarize what we just did, we set a variable to false, then did one of those repeaty

Nice! We can stop here if we want, but what about those people who add stuff to their page when you click and button and all that? Well, luckily we've got that sweet

Just write your code to fire off that function whenever you're done adding stuff to your page:

$("button").click(function () {
  $(".footer").append("<p>Another paragraph</p>");
  bumpIt();
});

And we're done. In less than 20 lines of JavaScript we have turned really simple ideas that were always really tricky to implement into browser-friendly (IE8+) realities.

Check out the demo on CodePen and feel free to turn this into a really simple jQuery plugin that wins you tons of fans, just let me know about it.

If you liked this, you might be interested in some of our lab projects.

-Cory Simmons