Responsive jQuery Sticky Footer

Being able to add a sticky footer seems to be a reoccurring issue for many sites, yet solutions have been freely available online for several years.

 

I found the best solution to be CSS Sticky Footer by Ryan Fait, while an awesome piece of work, it did not take into account responsive code and required a fixed height for all elements in order to work.

 

I took Ryan’s solution and added some jQuery to work both on responsive and page load, no matter what the footer height. This made my solution usable on any website, when configured with the correct HTML structure, and without the need to work out footer heights on load or at certain breakpoints.

 

 

Here’s how the sticky footer works

 

HTML

Use the following structure, wrapping the main website content and leaving the sticky footer outside.

<body>

   <div id="wrapper">
      
      <header>

         // Header code

      </header>

      <main>

        // Website content

      </main>

      <div id="push"></div>

   </div>

   <footer>

    // Footer code

   </footer>

</body>

 

CSS

Use this CSS to ensure the right containers are set to full height.

body, html {
   height: 100%;
}

#wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
}

 

jQuery

This is the part which allows for my responsive website to always keep the sticky footer stuck to the bottom.

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});
   
function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}