It's not complicated, but it's also not that simple.
First solution:
See:
Ryan Fait's - A CSS Sticky Footer that just works[
^]
From the site:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px;
}
.footer, .push {
height: 155px;
}
-------------------------------------------------------------------
Second option (Sticky Footer Solution by Steve Hatcher)
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
* {margin:0;padding:0;}
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 180px;}
#footer {position: relative;
margin-top: -180px;
height: 180px;
clear:both;}
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
Cheers,
Edo