Cross browser sticky footer with fluid height using jQuery

I recently needed a sticky footer. Having a sticky footer means your footer sticks to the bottom of your browser window if your document (content) is not as heigh as your browser window.

There's a few options to do this using CSS. But they all assume you know the height (fixed) of your footer. I didn't. The footer was managed in the CSS, so I could expand or shrink over time.

I decided to write something myself. CSS only didn't seem too cut the chase. So I headed over to my jQuery toolbox and came up with the following code. You can see an example of it here. You can see it in action on a production (Drupal) site on www.encantar.be.

    <div id="wrapper">
      <div id="header">This is the header.</div>
      <p>Some content.</p>
      <div id="footer">This is the (sticky) footer.</div>
    </div>

$(document).ready(function() {
  positionFooter();
  
  $(window)
    .scroll(positionFooter)
    .resize(positionFooter);
  
  function positionFooter() {
    var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
    if(docHeight < $(window).height()){
      var diff = $(window).height() - docHeight;
      if (!$("#sticky-footer-push").length > 0) {
        $("#footer").before('<div id="sticky-footer-push"></div>');
      }
      $("#sticky-footer-push").height(diff);
    }	
  }
});

As a plugin this becomes

$("#footer").stickyFooter();

// sticky footer plugin
(function($){
  var footer;

  $.fn.extend({
    stickyFooter: function(options) {
      footer = this;
      
      positionFooter();

      $(window)
        .scroll(positionFooter)
        .resize(positionFooter);

      function positionFooter() {
        var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
        if(docHeight < $(window).height()){
          var diff = $(window).height() - docHeight;
          if (!$("#sticky-footer-push").length > 0) {
            $(footer).before('<div id="sticky-footer-push"></div>');
          }
          $("#sticky-footer-push").height(diff);
        }
      }
    }
  });
})(jQuery);

An example of the plugin version can be found here.

Note: Just make sure you run this on document.ready!