Make Responsive Sticky Footer Using JavaScript

Make Responsive Sticky Footer Using JavaScript

Have you tried out a CSS solution for making sticky footer? What about Javascript? With the help of a few lines, we can easily fix the footer at the bottom of the page with wide-range of browser support.

You have heard many developers having an issue with browsers supports. For this, We have this Javascript fixed footer solution. It also responsive and work well with all mobile phone devices.

By using Javascript doesn’t mean that we will not use the CSS. Of course, we still need little help of CSS to keep the footer at the bottom of the page.

If you search out in Google, You probably find many methods of making fixed position footer tutorials.

I have already written about two of these methods before. One is about flexbox stick footer that is a modern-day method and works much better with all major browsers.

Another one is using Purely CSS with fixed the height which it’s bit old method now but still very useful and most used by CSS lovers.

But the issue with these methods they are not fully compatible with different browsers. Especially, These methods create the issue with older browsers, or sometimes they work with window browsers but not work well with mobile browsers.

Today, I am going to show you another method called Javascript dynamic sticky footer method. This method works well with the older browser and it’s lightweight, means you don’t need to add a lot of Javascript to make your footer fixed at the bottom of the page.

Sometimes people disagree to used Jquery for something as trivial, and they preferred to use flexbox method. But the flexbox has the issue with supporting older browser such as IE6 to IE9, Opera-Mini 12 and IE11 also have bugs. So using Jquery isn’t a bad thing and also we should have different options and alternatives.

Markup

The HTML is very simple to crate perfect sticky footer. We have the primary container that will have content and then HTML5 element called footer.

The Fixed Footer at Bottom will stay at the end of a page, no matter how much content you have or regardless of content height. We don’t need to wrap with any container div, We just add container div above the footer where you are allowed to add content.

<html>
  <body>
    <div class="container">
        <p>Your content area ....</p>
    </div>
    <footer>
       Copyright © Codeconvey 2016. All rights reserved.
    </footer>
  </body>
</html>

The Styling

The CSS is also straightforward, and We just need to set the position relative and min-height 100% for HTML element tag.

Next, we will make the position: absolute; and set left/bottom to zero. We also ensure that we set the width 100% so that the footer will be full across the browser window.

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

The Javascript

Finally, we will add following a bit of javascript to get our job done.

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

That is all about making simply footer that is sticky at the bottom of the page by using a bit of Javascript. I hope you will find it useful. If you have any question, please do let me know in below comment section.

Code ExamplesYou May Also Like