Існує чимало способів притиснути футер до низу сторінки як з допомогою 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; }
Зробила я все згідно інструкції, додала мінімальні стилі, все працює. Але, коли хочу продивитися окремий запис – то не притиснутий футер все одно. В чому може бути проблема?))