Вход





Забыли пароль?

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

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

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

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;
}