Как прижать footer к низу страницы
В этой статье я продемонстрирую один из способов как прижать
footer к низу страницы.
Существует много способов это сделать, но большинство из них используют либо дополнительные хаки, либо дополнительное, не нужное количество html тегов.
Этот метод для размещения
footer внизу страницы имеет ряд преймуществ над другими методами. Во-первых, используется всего лишь 15 строк css и минимальное количество html тегов.
Во-вторых, css код полностью валидный и корректно работает IE5++, Firefox, Safari, Opera.
Как использовать этот метод
Так как этот метод, чтобы прижать footer, использует минимальное количество кода, то с внедрением его в Ваши страницы не должно возникнуть никаких проблем.
* {
margin:0;
}
html, body {
height:100%;
}
.wrapper {
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto -4em;
}
.footer, .push {
height:4em;
}
<div class="wrapper">
<p>Контент</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Текст в футере</p>
</div>
Что заставляет footer прижиматься к низу страницы?
Не смотря на то, что метод выглядит очень просто, я думаю, нужно немного разьяснить принцип его работы.
- Высота равная 100% для контейнеров html и body заставляет вашу страницу использовать всю доступную высоту окна браузера.
- Для контейнера с классом .wrapper указывается минимальная ширина равная 100%. О том, как это сделать кроссбраузерно,
написано в статье: Кроссбраузерная минимальная высота(min-height)
- А теперь и начинается вся магия этого метода. Вы наверно заметили, что у контейнера .wrapper также указан
отрицательный нижний отступ равный 4em. 4em - это высота футера. А у контейнера .push
высота указана тоже 4em. Пустой контейнер служит для резервирования места для футера. Ну и сам контейнер .footer располагается в этом зарезервированом месте.
Вот и все. Все просто и понятно.
Добавить комментарий
