Привязка блока книзу макета страницы
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 и является таковым.
Список браузеров, в которых работает данное решение можно просмотреть здесь.
Изначально, оригинал статьи опубликован здесь.
Добавить комментарий