Как прижать подвал сайта к низу экрана
Когда на странице сайта мало контента, то при обычной блочной верстке подвал (он же футер) прижимается кверху, хотя по логике вещей должен бы находиться внизу экрана. Но так уж устроены браузеры, что все содержимое страницы кучкуют вверху экрана, занимая плотно все свободное место.
Особенно бестолково это выглядит, когда дизайнер рисует футер в виде земельки с травками и прочими жучками. Тут уж хочешь не хочешь, а надо как-то придавить непослушный подвал к низу монитора, вне зависимости от количества контента на странице.
Я решил вынести темку в отдельный пост, так как вопрос этот довольно частый. Рецепт был найден у вебмастера с кувалдой. Респект ему и уважуха!
Итак, принцип следующий: если мы верстаем страницу, помещая все блоки в один общий контейнер, то блок футера нужно вынести за пределы контейнера. При этом нужно обоим блокам задать относительное позиционирование position: relative;, в блоке контейнера добавить внизу пустую блок-распорку по высоте равную высоте футера, а футеру, в свою очередь, задать отрицательный верхний отступ на то же значение.
В листе стилей у блока контейнера будет задана минимальная высота в 100%. Получится, что контейнер у нас распространится на всю высоту экрана. Но чтобы подвал не потерялся за нижним краем монитора, мы его «подтянем» вверх на отрицательную высоту.
То есть, чтобы проделать этот трюк, надо заранее знать, какой высоты будет подвал. Ну, а так как мы это уже знаем, то нет ничего проще.
Теперь подробнее. Общая схема страницы следующая:
<html>
<head></head>
<body>
<div id="container">
<div id="header"></div>
<div id="leftside"></div>
<div id="rightside"></div>
<div class="clearfloat"></div>
<div class="empty"></div>
</div>
<div id="footer"></div>
</body>
</html>
Это 2-х колоночная страница с шапкой и подвалом. Колонка leftside — основной контент, колонка rightside — сайдбар, расположенный, соответственно, справа. Блоки шапки header, левой и правой колонок находятся в общем блоке контейнера.
Сразу после блока сайдбара rightside мы прописали так называемую «очистку» — clearfloat. Она помогает избавиться от всяческих глюков и не пускает подвал запрыгивать в пустое пространство страницы, если там таковое образуется.
Вообще, небольшой совет: пишите этот clearfloat всегда. При плавающей верстке (а блочная иногда так и называется) это очень полезная штука.
Сразу после очистки, но(!) до закрытия блока контейнера, мы поместили пустой блок-распорку empty, тем самым зарезервировав место под подвал.
Теперь посмотрим содержимое листа стилей. Я приведу лишь наиболее важные правила, которые реализуют нужный нам эффект. Все попутные правила я опускаю.
* {
margin: 0;
padding: 0;
border: 0;
}
html, body {
width: 100%;
height: 100%;
}
* html #container {
height: 100%;
}
body {
background: #fff;
color: #333;
}
#container {
position: relative;
width: 960px;
margin: 0 auto;
min-height: 100%;
}
.clearfloat {
clear: both;
}
.empty {
height: 50px;
}
#footer {
position: relative;
background: #333;
width: 960px;
height: 50px;
color: #ccc;
font-size: .9em;
margin: -50px auto 0;
}
Что тут есть. Во-первых, мы задаем отдельным набором правил размеры всей страницы как 100% по высоте и по ширине:
html, body {
width: 100%;
height: 100%;
}
Во-вторых, обязательно прописываем хак для ИЕ, иначе он не станет толком работать:
* html #container {
height: 100%;
}
Далее пишем правила для контейнера. Здесь важными являются два момента: относительное позиционирование relative и указание на минимальную высоту, опять же в 100%.
#container {
position: relative;
width: 960px;
margin: 0 auto;
min-height: 100%;
}
Для очистки применяем вот такое нехитрое правило:
.clearfloat {
clear: both;
}
А вот пустой блок-распорка имеет следующие параметры:
.empty {
height: 50px;
}
Здесь мы задали только высоту. Как я уже и говорил, высота эта берется из высоты самого футера. То есть, подразумевается, что его высота уже задана в 50 пикселей. Это важно. И вот почему:
#footer {
position: relative;
background: #333;
width: 960px;
height: 50px;
color: #ccc;
font-size: .9em;
margin: -50px auto 0;
}
В наборе правил для подвала мы задали точно такую же высоту.
Но обратите внимание: здесь тоже относительное позиционирование relative, а в самом нижнем правиле прописан минусовой отступ в те же 50 пикселей.
То есть, выходит, что контейнер распространился на всю высоту монитора, и по идее, вытеснил подвал за пределы монитора. Но мы смещаем подвал (благодарая опять же относительному позиционированию) на 50 пикселей вверх. Словно бы накладывая подвал поверх контейнера.
И в результате и овцы целы и волки довольны. Вот такая вот петрушка.
Пример страницы можно посмотреть здесь, а здесь файл CSS для нее.
