Sticky Footer – Make Footer Stick to the Bottom with Javascript

This is an update to this post. The method described below is quite old and since then browser support has gotten much better for different features provided by CSS. So I believe there is no need to use javascript anymore. You should be able to achieve this with a full CSS solution. Check out this post: https://css-tricks.com/couple-takes-sticky-footer/
I personally like the Flexbox method and I have used it on this very site. In case you are still supporting really old browser versions, in that case the javascript method below might save you some headaches.

Old Post:

Recently I redesigned my company website. There was an issue I came across when I implemented the design on pages that were a little shallow on content. My footer tended to show a little higher where the content ended, leaving some space under it. Ofcourse, this did not look good to me.

So I started out trying different things, my first take was that I can do this with only CSS. I tried a different things but it worked in one browser and didn’t work in the other. So finally I decided to use Javascript. I found a solution that worked in all major browsers.

Below is the code:

$(document).ready(function(){
  var viewportHeight = $(window).height();
  if(viewportHeight > 792){
    adjustFooter();
  }

$(window).resize(function() {
var newHeight = $(window).height();
if(newHeight > 792){
  adjustFooter();
  } else {
    $('#footer').css({'position':'inherit'});
    $('#wrapper').css({'position':'inherit'});
  }
});

function adjustFooter (){
  $('#footer').css({'position':'absolute','bottom':'0'});
  $('#wrapper').css({'position':'relative'});
}

});

Leave a Reply

Your email address will not be published. Required fields are marked *