Блог > Html/Css верстка > Как прижать footer к низу страницы {

Как прижать footer к низу страницы}

Решение 1

Данный способ очень прост. Разберем его поэтапно:

Высота равная 100% для контейнеров html и body заставляет вашу страницу использовать всю доступную высоту окна браузера.
Для контейнера с классом .page указывается минимальная высота равная 100%.(Кроссбраузерная минимальная высота)
Для контейнера .wrapper указан отрицательный нижний отступ равный 100px. 100px - это высота футера. А у контейнера .garant высота указана тоже 100px. Пустой контейнер служит для резервирования места для футера. Ну и сам контейнер .footer располагается в этом зарезервированом месте.

html

div class="page">
<p>Контент</p>
<div class="garant"></div>
</div>
<div class="footer">
<p>Текст в футере</p>
</div>

css

html, body {
height:100%;
}
.page {
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto -100px;
}
.footer, .garant {
height:100px;
}

Решение 2

В этом варианте на всю высоту окна растягивается body, а footer абсолютно спозиционирован относительно нижней его части. Нижний padding блока контента следует сделать больше и равным высоте footer.В данном способе уже отсутствует блок .garant. Способ 100% рабочий

<div class="header">
Шапка
</div>
<div class="content">
Контент
</div>
<div class="footer">
Футер
</div>

css

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
}
.header {
height: 3em;
width: 100%;
}
.content {
padding-bottom: 100px;
}
.footer {
height: 100px;
width: 100%;
position: absolute;
bottom: 0;
}

предыдущая следующая

Комментарии:

Константин	20 12 11
Огромное спасибо, только ваш метод реально работает! Перепробовал с десяток подобных способов, не везде совсем работали.

Алексей	29 08 11
Первый способ работает у меня только в опере и ИЕ, в остальных браузерах не хочет прижиматься

Алекс	09 08 11
А чтобы во втором случае футер оставался нормальным, нужно прописать: { left: 0; }

admin	08 04 11
Не совсем понятно, что вы хотите сделать. Опишите подробнее вашу задачу. Можете воспользоваться почтой для обратной связи. Или здесь...

Johnny

08 04 11

Ув. admin и коллеги! Перепробовал оба способа - ничего не выходит. Див, в котором лежит копирайт, при изменении размера окна всё равно наезжает на текст. Помогите, пожалуйста!
Проблему можно увидеть тут:
http://rеzniк.ws/portfolio.html
(Буква "e" и "к" написаны на киррилице)

admin	26 02 11
Напишите нам на почту. Посмотрим, что за проблема...

alex	26 02 11
работает, но если я вставляю свой див в див "Content", то футер едет вместе с контенотом... в чём дело?? никто не знает?

tim	18 01 11
спасибо, второй способ хорош =)

Nikita	21 08 10
Спасибо! Способ №1 сразу помог.

dina	14 08 10
Второй вариант работает отлично!

�� 1 �� 10. ��: 11 | �� | � ��