]]>
]]>
Рейтинг@Mail.ru

Прижать footer внизу с помощью css

Материал из Веб программирование.

Перейти к: навигация, поиск

Зачастую у веб программиста может стоят такая задача - как прижать подвал сайта (footer) в самый низ окна браузера, чтобы страница при этом выглядела вытянутой на всю высоту, вне зависимости от объема текста, а при высоте страницы, большей, чем высота окна браузера (при появлении скролла), footer оставался бы на положенном ему месте внизу.

Если с помощью таблиц задача решается лишь за счет указания высоты для таблицы и/или вложенной в нее ячейки, то при использовании CSS в блочной верстке применяется совсем иной подход.

В процессе практики было выделено 2 удобных способа прижимания footer к низу окна браузера с помощью CSS.

Первый способ

Footer прижимается вниз за счет его абсолютного позиционирования относительно элемента body и вытягивания высоты контейнеров html и body на 100%.

<html>
<body>
  <div id="content"></div>
  <div id="footer"></div>
</body>
</html>


* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
* html body {
  height: 100%;
}
body {
  min-height: 100%;
  position: relative;
}
#content {
  padding-bottom: 100px;
}
#footer {
  position: absolute;
  bottom: 0;
  height: 80px;
}


Как видите, в данном примере используется CSS-хак для Internet Explorer 6-й версии и ниже, который не знает правило min-height. Есть другое хитрое решение, которое может быть альтернативой хаку.

CSS-код в этом случае будет следующий:

* {
  margin: 0;
  padding: 0;
}
html {height: 100%;}
body {
  height: auto !important;
  height: 100%;
  min-height: 100%;
  position: relative;
}
#content {
  padding-bottom: 100px;
}
#footer {
  position: absolute;
  bottom: 0;
  height: 80px;
}


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

В ряде случаев со сложной версткой, использующей множество вложенных тегов, браузер Opera может не подчиниться правилам из приведенного выше примера, т.е. в результате при длинном тексте footer остается как бы зависшим на своем месте и наползает на текст.

Честно сказать, я так и не смог понять, в чем причина этого явления. Но данная проблема решается применением дополнительного CSS-кода:

#content:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

Второй способ

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

HTML-код:

<html>
<body>
  <div id="content">
    <div id="text"></div> 
  </div>
  <div id="footer"></div>
</body>
</html>

CSS-код:

* {
  margin: 0;
  padding: 0;
}
html, body {height: 100%;}
#content {
  position: relative;
  min-height: 100%;
}
* html #content {
  height: 100%;
}
#text {
  padding-bottom: 100px;
}
#footer {
  position: relative;
  height: 80px;
  margin-top: -80px;
}

При этом способе контент приходится вкладывать в дополнительный тег, для того, чтобы уже к нему применить нижний отступ. Если бы мы использовали для текста только один контейнер div, задали бы ему высоту 100% и добавили отступ снизу, то появился бы вертикальный скролл, чего нам необходимо избежать.

Ну и аналогично, взамен хаку для IE, можно использовать альтернативную запись с параметрами высоты.

]]>
Google+
]]>
Личные инструменты
Хочешь еще цитату? Нет ничего страшно в сомнениях. Если ты хакер, думающий о том, как бы начать свое дело и мешкающий, ты всего лишь часть сильной тенденции.Поль Грэм
веб-программирование
Просмотры
чтим

Deprecated: Function set_magic_quotes_runtime() is deprecated in /var/www/webproger/data/www/webproger.ru/1c6a72389c0fd92079ac7ae7cd356173/sape.php on line 218 Deprecated: Function set_magic_quotes_runtime() is deprecated in /var/www/webproger/data/www/webproger.ru/1c6a72389c0fd92079ac7ae7cd356173/sape.php on line 224

]]>
Rambler's Top100
]]>
]]>
]]>