CODEWITHSUNDEEP
jqueryhtmlcss
Hamidreza
Hamidreza

Reputation: 1915

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 different HTML code on other solutions that use CSS.

For example this solutions use css and doesn't work for me:

How to keep footer at bottom of screen

CSS to make HTML page footer stay at bottom of the page with a minimum height

Please note that i have my own design code and a new style or structure can't help me to fix the problem.

Upvotes: 0

Views: 6166

Answers (2)

Nic
Nic

Reputation: 227

CSS:

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

jQuery:

function footerAlign() {
  $('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

Upvotes: 1

Hamidreza
Hamidreza

Reputation: 1915

It's simple and easy.

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

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

Upvotes: 3

Related Questions