Автор: Крис Койер
Перевод: Всеволод Козлов

Футеры — отличное место для размещения информации об авторских правах, ссылки на страницу контактов и на основные разделы сайта. Пользователи уже привыкли обращаться за этой информацией к футеру сайта.

Но нередко бывает так, что футер находится не там, где должен. Случается это по разным причинам, но важен сам факт того, что случается.

Моей целью является исправление этого недоразумения. Как я добьюсь этого, читайте дальше!

Перед тем, как я предоставлю Вам фрагменты используемых мной для решения данной проблемы кодов, я хочу сказать Вам, что мы получим в итоге.

В итоге мы получим футер, прицепленный к нижней границе браузера!

HTML-код:

<div class="wrapper">
<div class="header">
<h1>Заголовок</h1>
</div>
<h2>Подзаголовок</h2>
<p>Контент</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Копирайты в футере</p>
</div>

CSS-код:

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em; /* нижний margin является отрицательной величиной высоты footer */
}
.footer, .push {
height: 4em; /* .push должен быть той же высоты, что и .footer */
}

За идею спасибо: Райану Фэйту
Оригинал статьи: A Bulletproof Sticky Footer, Woohoo!






























Смотрите также:

Понравилась статья? Поделитесь ей в социальных сетях: