Create sticky footer with jquery and css

When we design a website that time we are not sure about the page height means how much long or short our page. In most of the cases we are trying to fill the page with more and more content so that the footer of the page appear always on the bottom of the page. But in some case we don’t have enough content to represent to the visitors and in that case the footer looks weird that attached with the content.

sticky footer

http://webomnizz.com/demo/sticky-footer-with-jquery/

In this tutorial, we are making a small chunk of code that stick our footer content automatically at the bottom of the page in both conditions( if the content is less or more ). We are using jQuery to handle our footer. Just take a look on the below HTML, jQuery and CSS section.

Sticky footer: HTML Section

Just ignore the class span12 because in the demo section we are using bootstrap design template, you just consider on the class footer.

<div class="span12 footer">
<p>all rights reserved. &copy; 2013</p>
</div>

 

CSS Section:

.footer{
background: #7D603E;
padding: 10px 0;
text-align: center;
position: relative;
color: #ffffff;
}

 

jQuery Section:

$(document).ready(function() {
    var $docHeight = $(document).innerHeight(),
    $footer = $('.footer'),
    $footerPosition = $footer.position(),
    $footerHeight = $footer.innerHeight(),
    $topSpace = $docHeight - ( $footerPosition.top + $footerHeight );

    $footer.animate({top: "+=" + $topSpace + "px"}, "slow");
});

 

As you see in the above code we are using$(document).innerHeight(), because .innerHeight() provide us the height of the document including it’s padding that we want to adjust the footer. To make a little bit impressive to our sticky footer we have used some animation that slowly adjust our footer at the bottom.