STICKY FOOTER

by Arete

HTML

<div id="wrapper">
    <div id="header">Header</div>
        <div id="main">
            Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here...
 Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... Some Content Here... 
        </div>
        <div id="footer">Footer</div>
</div>

CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#wrapper{
   min-height:100%;
   position:relative;
}
#header {
   background:#00ff0f;
   padding:30px;
}
#main{
   padding:10px;
   padding-bottom:45px;   /* Height+padding(top and botton) of the footer */
   text-align:justify;
   height:100%; 
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:15px; /* Height of the footer */
   background:#00ff0f;
   padding:10px 0; /*paddingtop+bottom 20*/
}