пятница, 16 ноября 2012 г.

Прибиваем footer к низу страницы

Этот трюк просто должен присутствовать, если на странице только один или два абзаца текста, а подвал подпрыгивает вверх и просто неприятно на такие дела смотреть, тогда несколько строк CSS решают эту проблему навсегда.


Стандартная структура страницы:

<!Doctype HTML>
<html>
<head>...</head>
<body>
 <div id="header"></div>
 <div id="main"></div>
 <div id="footer"></div>
</body>
</html>
 
 
 Ну и совсем немного стиля для футера:

html {
 height: 100%;
}
body {
 position: relative;
 padding-bottom: 200px;
 height: 100%;
}
#footer {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 180px;
 background: #f0f0f0;
}


И все круто работает.

Источник: www.howtomake.com.ua

Комментариев нет:

Отправить комментарий