Притискаємо футер до низу вікна браузера засобами CSS

Існує чимало способів притиснути футер до низу сторінки як з допомогою jquery, так і з допомогою css.

Перераховувати їх не будемо, оскільки навіть серед засобів CSS набереться з півдесятка. Зупинимись на найоптимальнішому на мою думку варіанті. Спосіб цікавий тим, що тут не обов’язково наперед задавати висоту футера.

Складається структура з трьох основних елементів: контентного блоку (content), футера (footer) та спільного для обох батьківського блоку (wrapper). Проте в стилях важливо не оминути увагою четвертий та п’ятий об’єкти (html,body).

<html>
<body>

<div class="wrapper">

  <div class="content"></div>

  <div class="footer"></div>

</div>

</body>
</html>

Не забуваємо і про CSS верстки.

* {
 margin: 0;
 padding: 0;
}
html,
body {
 height: 100%;
}
.wrapper {
 display: table;
 height: 100%;
}
.content {
 display: table-row;
 height: 100%;
}

Основа способу полягає в тому, що ми емулюємо поведінку таблиці. Властивістю display: table; ми перетворюємо блок .wrapper в таблицю. Ну, а властивістю display: table-row; — перетворюємо блок .content в строку таблиці відповідно.

Цей шматок коду відповідає за обнулення внутрішніх та зовнішніх відступів усіх елементів.

* {
 margin: 0;
 padding: 0;
}

1 коментар для “Притискаємо футер до низу вікна браузера засобами CSS”

  1. Зробила я все згідно інструкції, додала мінімальні стилі, все працює. Але, коли хочу продивитися окремий запис – то не притиснутий футер все одно. В чому може бути проблема?))

    comment_image_reloaded_441508

Залишити відповідь