Creating a Footer that Sticks to the Bottom of the Viewport

Creating a sticky footer (one that sticks to the bottom of the screen or viewport no matter what) is something that seems like it would be simple to achieve, but actually can be kind of a nuisance. The issue with footers is that sometimes if your page doesn’t have a lot of content and doesn’t take up the whole length of a page, the footer will just fall at the end of the content, rather than at the bottom of the viewport. Many developers struggle with finding a quick or easy fix for this issue, and if you’re one of them, you might want to try out the code that Sticky Footer has prepared just for this situation. Sticky Footer’s code will make sure that your footer always stays put at the bottom of the screen.

Visit the site for yourself to learn more, or grab the CSS and HTML here.

Join us in our newest publication:

The basic HTML is simple. Take this snippet and fill it in with code that will make up the content of your page:

<div id="wrap">

   <div id="main">

   </div>

</div>

<div id="footer">

</div>

Now for the CSS:

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
	padding-bottom: 180px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -180px; /* negative value of footer height */
	height: 180px;
	clear:both;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}



/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->

*/

The CSS works by playing around with margins, padding, heights, and floats. It also includes some fixes for certain browsers that don’t work well with particular CSS properties. Also — don’t forget to include the conditional style in between the <head> tags of your HTML file so that if your page is viewed on Internet Explore 6 or lower, the code will still work.

Share and Enjoy !