Sticky Footer - Make Footer Stick to the Bottom with Javascript

by Foz Raja 4. March 2014 19:45

Hi Guys,

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'});

}

});

Tags: , , , ,

JQuery

Comments are closed
© 2014 FMR Web Design Delray Beach, Florida | P: (561) 235-3775 | E: info@fmrwebdesign.com