Как прижать футер к низу страницы с помощью 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>

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

Комментарии
Имя
e-mail
Текст комментария: # ×


Комментарии
Облако тегов
Интересное