Как "прилепить" нижний блок книзу? Google и другие поисковики дают много ссылок на различные решения данной проблемы. По ряду причин, большинство из предлагаемых решений уже не работают, либо работают, но без поддержки кроссбраузерности. На данный момент удалось найти такое кроссбраузерное решение, речь о котором и пойдет далее...

CSS шаблон для привязки подвала, так можно перевести название решения для прилепки нижнего блока описываемого далее.

Вкратце, все сводится к таким шаблонам:

XHTML

<div id="wrap">
	<div id="main" class="clearfix">
	</div>
</div>
<div id="footer">
</div>

CSS

* {margin:0;padding:0;} /* без комментариев */
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;}  /* значение должно быть равным высоте блока #footer */
#footer {
	position: relative;
	margin-top: -150px; /* отрицательное значение равное высоте */
	height: 150px;
	clear:both;} 
/* CLEAR FIX*/
.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 */

Что касается работающего примера, то сайт CSSStickyFooter и является таковым.

Список браузеров, в которых работает данное решение можно просмотреть здесь.

Изначально, оригинал статьи опубликован здесь.