Fix footer always in the bottom
October 13, 2016 | 3008 Views

Fix footer always in the bottom

Learn how to make the footer always in the bottom of your website even if there is a content or there is no content in your website.

Common Issues

Placing the footer always in the bottom is easy with the static websites but it's quite complicated in dynamic websites / web applications.

Let's assume, there are 10+ rows in your website, which are dynamically loaded from the database. In this scenario, the footer will be at the bottom of your website because there is enough content available in your website to scroll down.

If you have only one row in your website or there is nothing to show, this time the footer will jump to the top . The following are the solutions to keep your footer always in the bottom of your website even there is a content or not.

Handling The Event - Using JavaScript

The following is the JavaScript code to fix the footer always in the bottom of your website. In html keep <div class="container> to contain all your contents of the website and <div class="footer> is for your footer. Now use the following JavaScript.

$(document).ready(function(){
    $('.footer').css('margin-top', $(document).height() - ( $('.container').height() + $('.footer').height()) - 50 );
});
Live Demo




Free html templates

Download from a vast library of Open Source HTML & CSS templates and use them for free. No licenses required. Apart from that, do you need to build a whole website from scratch? Write to us anytime and we will get it sorted.

Contact Us

More Links