How to keep footer at bottom of screen using jQuery

Question

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.

Why do you want to do it in jQuery when it should be done in CSS? `position: fixed; bottom: 0;` is all you need. — Rory McCrossan, Apr 04 '16 at 07:47
@RoryMcCrossan I have my own design and position fix isn't a good solution. — Hamidreza, Apr 04 '16 at 07:50
Then you should post a question about your specific issue as using JavaScript as a crutch for the UI is a very bad idea. — Rory McCrossan, Apr 04 '16 at 07:52

score 3 · Accepted Answer · answered Apr 04 '16 at 07:45

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>

Nic · Answer 2 · 2016-04-04T08:00:19.747

1

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

edited Apr 04 '16 at 08:00

answered Apr 04 '16 at 07:57

Nic

217
2
16

1

Question clearly states the need of jQuery solution. **How to keep footer at bottom of screen using jQuery** – Pugazh Apr 04 '16 at 07:58
1

I've edited my answer. Please check and let me know if that works. – Nic Apr 04 '16 at 08:00
It doesn't need to write too many code, The answer is simple. – Hamidreza Apr 05 '16 at 07:26
Yes, I found this answer to my question. – Hamidreza Apr 07 '16 at 06:36
Thanks for this! but my footer is a bit tall how to adjust it to your desired height? – Alyssa Reyes Mar 19 '17 at 05:30

How to keep footer at bottom of screen using jQuery

2 Answers2

Linked