Как прижать футер к низу страницы(табличный способ).
Здравствуйте! Сегодня мы рассмотрим, как прижать футер к низу страницы, используя табличный способ.
В прошлой статье мы рассмотрели, как сделать прижатый футер, используя позиционирование, однако, как уже упоминалось, там есть минус, который заключается в том, что мы должны точно знать высоту футера, иначе тот способ работать не будет. Сегодня же я покажу еще один способ, используя который мы сможем и футер прижать к низу страницы, и высота его сможет быть динамичной.
HTML верстка:
<div class="wrapper">
<div class="header">
This is the header
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore rerum quidem eveniet. Sed laboriosam rem consectetur harum nam, aliquid ipsum molestiae explicabo aliquam, debitis hic voluptate blanditiis tempora id minus magnam corporis accusantium reiciendis cupiditate! Ab ipsa, ratione corrupti vitae, eos maiores odio eaque suscipit quas tempore reprehenderit recusandae inventore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore rerum quidem eveniet. Sed laboriosam rem consectetur harum nam, aliquid ipsum molestiae explicabo aliquam, debitis hic voluptate blanditiis tempora id minus magnam corporis accusantium reiciendis cupiditate! Ab ipsa, ratione corrupti vitae, eos maiores odio eaque suscipit quas tempore reprehenderit recusandae inventore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore rerum quidem eveniet. Sed laboriosam rem consectetur harum nam, aliquid ipsum molestiae explicabo aliquam, debitis hic voluptate blanditiis tempora id minus magnam corporis accusantium reiciendis cupiditate! Ab ipsa, ratione corrupti vitae, eos maiores odio eaque suscipit quas tempore reprehenderit recusandae inventore.</p>
</div>
<div class="footer">
This is the footer
</div>
</div>
И CSS код:
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
display: table;
}
.header, .content, .footer {
display: table-row;
}
.header, .footer {
height: 1px;
}
Итак, здесь мы для обертки задаем свойство display, равное table, чтобы данный блок стал вести себя, как таблица, а для блоков header, content и footer задаем значение display, равное table-row, чтобы они стали вести себя, как ряды таблицы. Однако, при таком подходе блоки header и footer будут иметь не свою реальную высоту, а высоту ряда таблицы по умолчанию. Чтобы это исправить, мы задаем для них высоту заведомо меньшую, чем реальная высота этих блоков - 1px.
Итак, вот и все! Спасибо за внимание и удачи!
-
Создано 30.06.2015 19:00:00
-
Михаил Русаков
Комментарии (2):
Легко и просто :) Мне нравится, практично.
Ответить
У меня не работает... Футер не прижимается к низу страницы, а идёт сразу за содержимым. Заработала только при свойстве класса wrapper не min-height: 100%; а просто height: 100%;
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.