Прижимаем футер к низу страницы

Апрель, 24th 2014Рубрика: Web 12079
Подписаться на комментарии по RSS

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

Чтобы не загромождать пример ненужными сущностями, для лучшего понимания, представим минимальный HTML-код будущей страницы.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Прижимаем футер к низу страницы</title>
</head>
<body>
<div class="page">
  <div class="wrapper">Контент страницы</div>
</div>
<div class="footer">Нижняя часть</div>
</body>
</html>

Перейдем к созданию CSS и начнём со стилей для элементов html и body:

html, body {
  margin: 0; padding: 0;
  height: 100%;
}

Строкой margin:0; padding:0; мы обнуляем отступы, так как разными браузерами выставляют эти значения по своему. Родителем нашего контейнера .page является элемент body, а у того в свою очередь html. Свойство height равно по высоте родительскому элементу и установлено по умолчанию в auto, меняем его на 100% и идем дальше:

.page {
  min-height: 100%;
  height: 100%; height: auto !important;
  background: #777;
}

С помощью min-height: 100% мы указываем нормальным браузерам, что минимальная высота контейнера должна быть равна высоте окна браузера. Если мне не изменяет память, IE начал понимать данное свойство только с 8 версии. При этом свойство height он трактовал неправильно, прописав height: 100% в IE получаем эффект min-height. Что же касается height: auto !important, то для нормальных браузеров он нейтрализует фиксацию высоты, а для IE оставляет, потому что последний не понимает значения auto, и использует заданные нами 100%. Надеюсь понятно.

Исли вы не намерены поддерживать старые браузеры, смело удаляйте эту строку.

Внутрь контейнера .page мы поместили блок .wrapper. Он защищает содержимое контента от заползания под футер, благодаря нижнему отступу:

.wrapper {padding-bottom: 100px;}

Ну и собственно, сам футер.

.footer {
  height: 100px;
  margin-top: -100px;
  background: #f00;
}

Как видите, есть некоторое ограничение данного метода - высота футера строго фиксирована. Отрицательный верхний отступ равен высоте футера. Вот что у нас получилось в итоге:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Прижимаем футер к низу страницы</title>
<style type="text/css">
  html, body {
    margin: 0; padding: 0;
    height: 100%;
  }
  .page {
    min-height: 100%;
    height: 100%; height: auto !important;
    background: #777;
  }
  .wrapper { padding-bottom: 100px; }
  .footer {
    height: 100px;
    margin-top: -100px;
    background: #f00;
  }
</style>
</head>
<body>
  <div class="page">
    <div class="wrapper">Контент cтраницы</div>
  </div>
  <div class="footer">Нижняя часть</div>
</body>
</html>

Подписывайтесь на канал

Яндекс.Дзен и узнавайте первыми о новых материалах, опубликованных на сайте.