keep page footer at the bottom

Page footer can be kept at the bottom of the page using CSS or jQuery. I prefer the jQuery solution over CSS as it is much simpler and cleaner.

Following code snippet will ensure that page footer is always kept at bottom of the page. This will also work even if the page has dynamic content added when the page is being rendered. Make sure the footer id is specified as footer.


<script>

  $(document).ready(function() {

   var docHeight = $(window).height();
   var footerHeight = $('#footer').height();
   var footerTop = $('#footer').position().top + footerHeight;

   if (footerTop < docHeight) {
    $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
   }
  });
</script>

cheers
Samitha