Вёрстка сайтов с использованием тега div является одновременно и простой, и сложной. Простота её заключается в легкости чтения итогового html-кода при том условии, что названия классам даны удобочитаемые, а не представляют из себя набор несвязных букв. Сложность же её в том, что приходится бороться с несколькими браузерами за идентичное отображение в каждом.
В этой статье я покажу, как сверстать одну из самых сложных, по крайней мере для меня, частей сайта — "подвал" или "футер", который бы всегда находился внизу страницы независимо от того, какое количество текста будет в основном поле. При этом не должна появляться вертикальная полоса прокрутки.
Зачем нужно делать так, чтобы подвал был "прибит" к низу страницы? Обратите внимание на эту страницу из сделанных мною сайтов. Вся страница просто сжата, как куча металлолома под прессом. Это просто некрасиво. Да, я ругаю сайт, сделанный своими руками, так уж случилось.
Так вот, приведу HTML-кода, который должен позволить нам сделать всё по плану:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head></head><body>
<div class="main">
<div class="top-part">Привет, я - содержимое страницы
<div class="empty"></div>
</div>
<div class="footer">А я подвал</div>
</div>
</body></html>
Обратите внимание! Я использую строгий DOCTYPE, чтобы приблизить результат обработки скрипта всеми браузерами.
В результате работы скрипта у нас имеется:
- main — главный блок, в который помещено всё остальное содержимое страницы. Без него разные браузеры отображают итоговый рещультат, кто как хочет;
- top-part — блок, в котором будет размещена вся информация страницы, кроме "подвала" (футера);
- footer — собственно "подвал" страницы, который должен быть постоянно "прибит" к низу страницы;
- empty — вспомогательный блок, о котором расскажу чуть позже.
Об этом немного рассказал, теперь опишем стили, которые необходимы для правильного отображения нашего содержимого:
html, body, .main {
height: 100%; margin:0;
padding: 0;
}
*html .top-part {
height: auto !important;
height: 100%;
}
.top-part {
min-height: 100%;
margin: 0 auto;
}
.empty {
clear: both;
height: 125px;
visibility: hidden;
}
.footer {
min-height: 115px;
margin-top: -115px;
height: auto;
}
*html .footer {
height: auto !important;
height: 115px;
} Сначала для тегов убираем внутренние и внешние отступы. Растягиваем на 100% по высоте теги body и html, а также main и top-part. Как Вы можете заметить, я использую хак для IE6 "*html top-part". Дело в том, что этот браузер не знает поля min-height, поэтому для него нужно использовать height: 100%. А чтобы это не сказалось на остальных представителей линейки IE, я указал там же "height: auto !important". !important заставит IE7+ использовать эту инструкцию, а не ту, что указывает на высоту = 100%.
Для footer-a мы используем такую интересную фичу, как отрицательный margin, значение которого должно совпадать с высотой "подвала". Таким образом, в примере footer наползет на низ основного блока страницы на 120 пикселей. Чтобы при этом он не закрыл полезное содержимое страницы, мы и создаем div с классом empty, высоту которого указываем больше или равную высоте подвала. Для empty также стоит указать clear: both, чтобы какие-то обтекающие объекты случайно не попали под footer. В принципе, visibility: hidden является лишним для этого div-a, это свойство я воткнул для собственного успокоения=). Чуть позже я заменил в футере height: 115px на min-height: 115px, чтобы иметь возможность при необходимости вставлять в футер больше информации, чем на 115 пикселей. Это потребовало использовать хак, аналогичный тому, что был использован для top-part.
Смотрим результат проделанной работы. Как мы видим, footer встал вниз страницы, как мы и ожидали.
Корректность вёрстки я проверял под Windows в Opera 9.64, Internet Explorer 6, Safari 4, Mozilla FireFox 3.0.7 и Chrome 2.0.
comments powered by Disqus