Как прижать footer к низу окна

Далее будет рассмотрен пример того, как можно прижать подвал / footer к низу страницы. Сразу отмечу, что способ этот стандартный, а значит кроссбраузерный, т.е. без всяких сомнительных CSS хаков. Даже в IE (по крайней мере в IE8) будет работать.

Посмотреть рабочий пример

Смотрим скриншот:

Как прижать footer на CSS

Смотрим исходный код, CSS:

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.container {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  padding: 0;
  margin: 0 0 -80px 0;
}
.bottom-push, .bottom {
  padding: 0;
  margin: 0;
  height: 80px;
}

В стилях выше обратите внимание на height: 80px; и margin: 0 0 -80px 0; — 80 пикселей это высота подвала. Установите её на то значение, которое вам нужно.

Это важно! Если по каким либо причинам вам не удается пристроить футер-липучку на свой сайт, прошу обратить внимание на значение отступов padding и margin у элементов. Плюс, чтобы меньше беспокоиться о кроссбраузерной верстке используйте / подключите, т.н. сброс стилей.

HTML:

<!-- ... -->
</head>
<body>
  <div class="container">
    Основной контент.
    <div class="bottom-push"></div> <!-- заготовка под подвал -->
  </div>
  <div class="bottom"> <!-- сам подвал -->
    Закрепленный подвал.
  </div>
</body>
</html>

P.S. Кстати тот же способ показан в примерах к популярному CSS фреймворку под названием Twitter Bootstrap.

Опубликовано 12-07-2013 в 10:46


Комментариев к записи: 1

  1. Максим:

    В IE 8 не работает. Подвал просто замораживается..

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты