html, body, #wrap {
height: 100%;
margin: 0px;
}
body > #wrap {
height: auto;
min-height: 100%;
}
#main {
padding-bottom: 50px; /* отступ должен быть равен высоте футера */
}
#footer {
position: relative;
margin-top: -50px; /* отрицательное значение высоты футера */
height: 50px;
clear:both;
background: #000;
text-align: center;
color: #fff;
font-size: 260%;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */

2. HTML

<div id="wrap">
<div id="header"></div>
<div id="main" class="clearfix"></div>
</div>
<div id="footer">
Я липкий футер!
</div>

Демо