Футер (footer) всегда внизу страницы

У многих начинающих веб-мастеров часто возникает вопрос:"А как сделать футер внизу старницы". На самом деле задача эта достаточно легкая и сейчас вы в этом убедитесь.

Первым делом советую посмотреть демо.

Посмотрим код между <body>

<body>
<style type="text/css">
  html, body {height: 100%; margin: 0px; padding: 0px; text-align: center;}
  .page {min-height: 100%; height: auto !important; height: 100%; background: gray;}
  .wrap {padding-bottom: 122px;}
  .footer {height: 122px; margin-top: -122px; background: #c3c3c3;}
</style>
<div class="page">
  <div class="wrap">
          Я пример контента. Можете вставить в меня много много тегов
&lt;br&gt; и убедиться, что футер находится всегда внизу</div>
</div>
<div class="footer">Я футер!!!</div>
</body>

Разберем самое значимое

<div class="page">
  <div class="wrap">

Див в диве нам нужен для того, чтобы основное содержимое сайта не залазило под футер

А теперь CSS

html, body: height: 100%; - говорим браузеру, что содержимое нашего сайта занимает все пространство по высоте. margin: 0px; padding: 0px; делает отступы от краев браузера равным 0. Это чтобы контент прилегал к началу экрана.

.page: min-height: 100%; height: auto !important; height: 100%; - все это говорит браузеру, что основная часть контента у нас во всю высоту. Почему так много?! Это чтобы во всех браузерах работало.

.wrap: padding-bottom: 122px; - делаем отступ контента от нижней части браузера. Это нужно опять-таки для того, чтобы контент не заезжал под браузер. Число 122 - это высота футера, поэтому мы используем это число здесь.

.footer: height: 122px; - высота футера. margin-top: -122px; - отступ футера от нижней части браузера. Это нужно для того чтобы, если на странице мало контента, то футер не должен быть доступен с помощью скрола, а был прижат к нижней части браузера. Именно для этого мы берем отрицательное значение margin-top, как бы поднимая этим наш footer. 122 - опять-таки это высота футера.

Вот и все, ничего сложно. Теперь вы знаете, как прижать footer (футер) к нижу браузера.

А пока можете посетить сайт http://www.biocontrol.ru на досуге.

Прикрепленный файлРазмер
Футер внизу экрана711 байтов
Rambler's Top100 Яндекс.Метрика