I was recently working on a project that required a sticky footer. I needed the footer to always be aligned flush with the bottom of the screen. This was no problem when there was enough content to push the footer against the bottom edge. But what happens when there isn’t enough content? You end up with a floating footer and that’s no fun.

I immediately Googled the problem and found a bunch of various jQuery and CSS solutions. When I tried them though, none of them seemed to do exactly what I wanted them to do. Plus my code was structured a little differently than the examples. I decided to just try to come up with my own solution using jQuery. I’ve had enough of dealing with IE’s quirks, IE understands JQuery so it seemed like the easiest solution.

In order for this to work, the footer can’t be in a wrapper class. The code would have to be structured like this example:

<div id="page"></div>
<footer id="colophon"></footer>

Also, it is required that you set margin and padding for body to 0. These are the only requirements as far as I know of that have to do with CSS.

body {
    margin: 0;
    padding: 0;
    }

The idea behind the jQuery was pretty simple. Check the height of the element, then check the height of the viewport. If the viewport height is greater than #page’s height, then we need to set some CSS on the footer. That CSS will just absolutely position it at the bottom of the frame. It’s a good idea to make sure your footer’s width is 100% so it looks right.

I brought in jQuery and inserted the code.

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script><script type="text/javascript">
$(document).ready(function() {
  var bodyHeight = $("body").height();
  var vwptHeight = $(window).height();
  if (vwptHeight > bodyHeight) {
    $("footer#colophon").css("position","absolute").css("bottom",0);
  }
});
</script>

In order to make this work with older versions of IE (< IE9), include Google's HTML5 shiv.

	<!– Add conditional for IE7 + 8 support –>	
	<!–[if lte IE 8]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]–>

See the demo

Worked like a charm for my purposes. Feel free to modify it for your own use. If you have any questions or comments, feel free to leave a comment! :)

9 thoughts on “Simple Sticky Footer Using jQuery

  1. Hello,
    thank you for sharing. I opened your demo page on several versions of IE (7 – 10).
    the footer does not seem to work on IE 7 and IE 8. On Chrome, Firefox and IE 9 and 10, it works like a charm.

    1. @Nopadon: Thanks for pointing that out! It has to do with using the HTML5 footer tag. Browsers < IE9 are not fans of footer, header, article, etc tags. I added Google’s HTML5 shiv for legacy browsers and now it works for IE7 and IE8.

  2. This looks great. Unfortunately when refreshing the page the footer jumps from the bottom to the top and back to the bottom. Anyway to prevent this? Thanks and keep up the great work!

    1. Hey Ryan, glad you liked it. I see what you mean about the footer jumping around. I tinkered around and it seems that if you load the script in the head, the jumping goes away. I updated the example (link here for easy reference) so you can see it in action.

      The only thing I changed is now I’m loading jQuery and my script in the head tag instead of before the closing body tag, allowing it to be executed slightly sooner, which seems to eliminate the jumping around. Seems like it shouldn’t matter too much where its loaded in the document because the code is firing on $(document).ready but it seems to work better in the header. Hope this helps.

  3. function stickyFooter(){
    var bodyHeight = $(“body”).height();
    var vwptHeight = $(window).height();
    if (vwptHeight > bodyHeight) {
    $(“footer#footer”).css(“position”,”absolute”).css(“bottom”,0);
    }else{
    $(“footer#footer”).css(“position”,””).css(“bottom”,””);
    }
    }
    $(document).ready(function() {
    stickyFooter();
    });
    $(window).resize(function() {
    stickyFooter();
    });

Leave a Reply