Из названия стало понятно, что речь в данной статье пойдет о способе прижатия любого контейнера к низу страницы. Данная статья ориентирована на новичнов в верстке сайто, которые не уловили всех прелестей этого благородного дела )). Ну неготорым «прошареным» тоже не мешает почитать… все так сложно как думается…
Прижать блок книзу страницы не составляет никакого труда. Объясню в двух словах как реализовать данный трюк. Сперва создаем внешний контейнер, к примеру <div class=»all»>, который в свою очередь должен быть растянут на всю высоту. Т.е. для этого в стилях пишем следующее:
.all {height: auto; min-height: 100%}
*HTML .all {height: 100%}
Немного разъясню котовасию со стилями. Всеми «любимый» браузер ие ниже 7 версии не понимает min-height без лишних телодвижений, поэтому для ие пишем отдельный стиль. Вообще советую выносить все стили для ие в отдельный файл. Об этом расскажу в другой статье.
В итоге мы имеем код следующего вида:
<html>
<head>
<title>Заголовок станицы</title>
</head>
<body>
<div class="all">
Какое-нибудь содержимое
</div>
</body>
</html>
Затем вне блока делаем наш футер <div class=»footer»>, который будет под блоком с классом all. Пусть для наглядности блок будет серого цвета (0f0f0f) и высотой 100 пикселей. В итоге запишем следующий код в файл стилей для блока с классом footer:
.footer {background: #f0f0f0; height: 100px}
Что делать с колесом прокрутки спросите вы, а с ним все уже решено. Для блока footer запишем верхний отрицательный отступ margin равный высоте блока. Т.е. для стилей нижнего блока добавим margin: -100px 0px 0px 0px.А чтобы ссылки нижнего блока и текст были доступны пропишем position: relative для блока с классом footer. Контейнер перекроет общий контейнер, в результате чего будут доступны ссылки, текст, картинки и т.д. Общий вид стилей для нижнего блока имеет вид:
.footer {position: relative; margin-top: -100px; background: #f0f0f0; height: 100px}
Скомпануем код:
<html>
<head>
<title>Заголовок станицы</title>
</head>
<body>
<div class="all">
Какое-нибудь содержимое
</div>
<div class="footer">
Содержимое подвала
</div>
</body>
</html>
Все, подумаете вы… Нет еще не все. Если содержимое контейнера с классом all будет превышать размеры экрана, то оно пропадет частично под блоком с классом footer. Чтобы этого не произошло, вставляем самым последним контейнером в контейнере с классом all контейнер с классом clearer (<div class=»clearer»></div>) Стилизуем контейнер:
.clearer {clear: both; height: 120px}
Поясню выше написанное… Высота должна быть больше, либо равна высоте подвального контейнера с классом footer. Почему спросите вы, да потому что, этот блок создает видимый отступ контента внешнего общего блока от подвального контента.
Иными словами мы создали пустой контейнер, поверх него поместили подвал и получили нужный нам результат.
Позже выложу рабочий пример. чтобы всю мощь метода ощутить можно было. ))
Оставляйте свои замечания и комментарии.
)
