To create a sticky footer we will need three DIVs: #wrapper, #push and #footer (fully working sticky footer example):

<div id="wrapper">
	<div id="header">How to create a sticky footer</div>
	<div id="main-content">
		Some content...
	</div>
	<div id="push"></div>
</div><!--.wrapper-->
<div id="footer">
	Sticky footer
</div><!--footer-->

I used #main-content and #header just to add some content to the page. So, what CSS rules we must add to have a sticky footer? First of all, we have to remove default paddings and margins and to add html and body heights:

* {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
	min-height: 100%;
}

Then we must add #footer height:

#footer {
	height: 50px;
}

Then we add 100% #wrapper height:

#wrapper {
	min-height: 100%;
}

After these actions we will get a sticky footer which is always below the visible working area. That’s because of 100% height of #wrapper. There’s not much to do with this, so we just remove the unwanted height using negative bottom margin:

#wrapper {
	margin-bottom: -50px;
}

This is better. But still there is one problem. When the content is long enough, it will overlap the footer, which is not the desired effect:

#push {
	padding-bottom: 50px;
}

Click here to download fully working sticky footer example.

If you want to have a sticky footer and to vertically center your content, read this post, please.