Как прижать футер к низу страницы с помощью CSS?

Чем больше занимаешься версткой сайтов, тем больше всяких нетривиальных задач приходится решать. В обычной жизни прижимать футер к низу экрана не нужно, так как он логически располагается внизу страницы после вывода информационного блока сайта. Но если сайт представляет из себя промо-сайт, где вся текстовая информация может уместиться на одном экране, возникает необходимость прижимать футер к самому низу. Если этого не сделать, то на больших экранах образуется ужасная белая область, чего допускать категорически нельзя.

Прижать футер к низу страницы можно как с помощью JS, так и с помощью CSS. Кстати, второй вариант более предпочтительнее, так как работает намного быстрее, чем если это делать через JavaScript.

Как это все работает?

В недавних публикациях, я рассказывал как делать резиновый трехколоночный интерфейс. Здесь и там технологии схожи отрицательного margin`а.

Я для удобства разделил листинги кода на CSS- и HTML- код, чтобы проще было вникнуть во всю суть.

Прижимаем футер. CSS-код

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  position: relative;
}
#container {
  min-height: 100%;
}
#main {
  padding-bottom: 80px;     /* высота футера */
}
#footer {
  background: gray;
  height: 80px;             /* высота футера */
  margin-top: -80px;        /* отрицательный margin,
                               равный высоте футера  */
  position: relative;
}

HTML-код

Этот код является скелетом нашего интерфейса:

<div id="container">
  <div id="main">
    Информационная часть сайта
  </div>
</div>
<div id="footer">
  Прижатый к низу футер
</div>

Вроде, на мой взгляд, такой способ прижатия футера к низу страницы один из самых элегантных и простых способов, которые мне когда-либо приходилось видеть.

P.S. Некоторые заказчики хотят видеть у себя на сайте форму оформления заказа, которая будет оформлять заказ прямо с сайта. Стремление правильное, но почему-то никто из них не понимает какие последствия это повлечет за собой. Тот факт, что имея такую форму, заказчик обязуется в кратчайшие сроки ответить на отправленное сообщение. Для таких компаний будет проще воспользоваться услугами сторонних компаний, которые предоставляют услугу – виртуальный консультант. Проблема своевременного ответа вашим посетителям решиться сама собой.

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

Имя
e-mail
Сайт
Текст комментария: