1 Flares Google+ 1 Facebook 0 Twitter 0 LinkedIn 0 1 Flares ×

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

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.

About the author

Jogesh Sharma Jogesh Sharma is a web developer and blogger who loves all the things design and the technology, He love all the things having to do with PHP, WordPress, Joomla, Magento, Durpal, Codeigniter, jQuery, HTML5 etc. He is the author of this blog. If you'd like to connect with him, head on over the Google+