How To Keep Footer At Bottom Of Screen Using Jquery

How to keep footer at bottom of screen using jQuery. I know its duplicate in css but how do it with jQuery? I found many problem in different size of screen (small screens) or diff

Solution 1:

It's simple and easy.

Just copy/paste following code to your body before your footer or where you want to stretch.

<divid="js-heightControl"style="height: 0;">&nbsp;</div><script>
    $(function(){
        $('#js-heightControl').css('height', $(window).height() - $('html').height() +'px');
    });
</script>

Solution 2:

CSS:

html {
    position: relative;
    min-height: 100%;
}
footer {
    display:none;
    position: absolute;
    left: 0;
    bottom: 0;
    height: auto;
    width: 100%;
}

jQuery:

functionfooterAlign() {
  $('footer').css('display', 'block');
  $('footer').css('height', 'auto');
  var footerHeight = $('footer').outerHeight();
  $('body').css('padding-bottom', footerHeight);
  $('footer').css('height', footerHeight);
}


$(document).ready(function(){
  footerAlign();
});

$( window ).resize(function() {
  footerAlign();
});

DEMO: http://codepen.io/anon/pen/ZQxQoR