DENISPETROV.RU

Одной из проблем, с которыми я столкнулся, когда начал верстать слоями, был вопрос как прижать футер к низу страницы, чтобы он находился там не зависимо от величины контента, но при появлении вертикальной полосы прокрутки прокручивался вместе со всей страницей. Я перепробовал много вариантов решения данной проблемы и хочу поделиться одним из них. Данный вариант прижатия футера к низу страницы наиболее лаконичен и корректно отображается во всех современных браузерах.

Итак рассмотрим код:

css:

/*убираем отступы у всего*/
* {
margin:0;
}

/*растягиваем по высоте страницу*/
html, body {
height:100%;
}

.wrapper {
min-height:100%;
/*min-height для IE*/
height:auto !important;
height:100%;
/*оставляем место для футера*/
margin:0 auto -4em;
}

.footer, .push {
height:4em;
}

html:

<!-- контент -->
<div class = "wrapper">
<p>Здесь конетент страницы</p>
<!-- место под футер -->
<div class = "push">
</div>
</div>
<!-- футер -->
<div class = "footer">
<p>
Текст в футере
</p>
</div>

Думаю, как это работает понять не сложно из комментариев. Но если возникают трудности, посмотрите на картинку ниже:

Немного поясню:

• Задавая для html и body высоту 100%, мы заставляем растянуться нашу страницу на всю высоту окна браузера.
• Контейнер wrapper имеет снизу отрицательный отступ — тем самым мы оставляем место под футер.
• Контейнер push необходим, чтобы текст в основной части страницы не наползал на футер.
• Ну а сам футер имеет отрицательный отступ сверху, поэтому он сдвигается вверх и занимает положенное ему место.

Разметка проходит валидацию и корректно отображается в IE 6+, Opera и Firefox.