Поиск 

Как с помощью CSS прижать footer к низу окна браузера?

Четверг, Декабрь 24, 2009 г.
Помнится мне, в тот момент, когда я стал переходить с таблиц на верстку дивами, одной из трудностей, с которыми я столкнулся, была следующая – как прижать подвал сайта (footer) в самый низ окна браузера, чтобы страница при этом выглядела вытянутой на всю высоту, вне зависимости от объема текста, а при высоте страницы, большей, чем высота окна браузера (при появлении скролла), футер оставался бы на положенном ему месте.

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

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

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

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

HTML-код:

<html>
<body>

<div id="content"></div>

<div id="footer"></div>

</body>
</html>

CSS-код:

* {
 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 ниже 7-й версии, который не знает правило 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 может не подчиниться правилам из приведенного выше примера, т.е. в результате при длинном тексте футер остается как бы зависшим на своем месте и наползает на текст.

Честно сказать, я так и не смог понять, в чем причина этого явления. Но данный трабл решается применением дополнительного 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, можно использовать альтернативную запись с параметрами высоты.
Взято с www.dimox.name
Теги: CSS | Браузер Автор: Romanus | Просмотров: 3792 | Нет комментариев | print |

Похожие статьи

все похожие статьи 
Категории
ТОП 10 - Авторы
  1     Луна   1964     2.93   
  2     pobeda   487     2.96   
  3     Tais   444     3.11   
  4     Foma   139     2.92   
  5     Lubov   52     2.91   
  6     Angel   45     2.93   
  7     Dolores   45     2.77   
  8     Paradiz   31     2.84   
  9     Xenta   29     2.85   
  10     Pryanik   26     2.8   
все авторы 
Последние статьи

Торт Пьяная вишня

Понедельник, Апрель 01, 2019 г.
|
Луна | 1481 |

Вода

Среда, Январь 24, 2018 г.
|
Луна | 948 |

Фруктовые соки

Среда, Январь 24, 2018 г.
|
Луна | 813 |

Вода и жизнь

Среда, Январь 24, 2018 г.
|
Луна | 1368 |

Голубцы с грибами

Среда, Январь 24, 2018 г.
|
Луна | 1382 |
Популярные статьи

Мавритания

Понедельник, Март 14, 2011 г.
|
Луна | 6274 |
|
pobeda | 70085 |

Материки

Вторник, Май 11, 2010 г.
|
Tais | 327505 |

Айшвария Рай - биография

Вторник, Ноябрь 02, 2010 г.
|
pobeda | 39029 |

Облако тегов