Как прижать 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


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

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

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

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

  • Иван: к записи Привет всем, доброго времени суток! Я излазил весь »
  • Александер: к записи Потом пригляделся, вроде Вы не это имели в виду и »
  • Александер: к записи У Вас не русифицируется, потому что не везде включ »
  • Администратор: к записи Это надо использовать функции вашей CMS. »
  • Alex: к записи Ребят, а подскажите пожалуйста, как реализовать с »
  • Владимир: к записи А как теперь будет выглядеть ссылка для перехода н »
  • Администратор: к записи Не знаю. »

Статистика спама

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