Коротко: прижать футер к низу страницы проще всего через flex-колонку: body или оболочке задать min-height: 100vh и display: flex; flex-direction: column, а футеру — margin-top: auto. Тогда футер «прилипнет» к низу окна, даже если контента мало.
Варианты решения
| Способ | Плюсы |
|---|---|
Flex + margin-top: auto |
современный и короткий |
Grid с 1fr |
строгая структура страницы |
| Абсолютное позиционирование | для простых лендингов |
position: fixed |
только если подвал нужен постоянно видимым |
Вкладки: примеры
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
main { flex: 1; } /* занимает свободное место */
footer { margin-top: auto; } /* прижимается к низу */Самый надёжный способ. main растягивается и «толкает» футер вниз.
body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
margin: 0;
}Три строки: шапка, растягивающийся контент, футер. 1fr в середине забирает всё свободное место.
html, body { height: 100%; margin: 0; }
.wrapper { position: relative; min-height: 100%; padding-bottom: 80px; }
footer { position: absolute; bottom: 0; left: 0; right: 0; height: 80px; }Старый, но рабочий способ. Обязательно padding-bottom у обёртки, равный высоте футера — иначе контент заедет под него.
footer {
position: fixed;
left: 0; right: 0; bottom: 0;
}Футер всегда виден. Подходит только для «липких» панелей действий, иначе он перекрывает контент. Не забудьте отступ контенту снизу.
body { margin: 8px }. Без сброса появляется полоса прокрутки и «лишний» отступ — классическая причина, почему min-height: 100vh даёт скролл.Практика: «липкий» футер в WordPress
- Сбросьте отступы у
htmlиbody. - Обёртке сайта задайте flex-колонку и
min-height: 100vh. - Основной контент —
flex: 1. - Футеру —
margin-top: auto(или строки grid). - Проверьте на короткой и длинной странице.
- Проверьте на мобильном: адресная строка может менять высоту (
100dvh).
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Футер посередине | контент не растянут | flex: 1 у main |
| Появилась прокрутка | margin у body | сбросить отступы |
| Футер перекрывает текст | fixed без отступа |
добавить padding снизу |
| На мобильном «прыгает» | 100vh и панели браузера |
100dvh |
Проверьте себя
Вопросы и ответы
Потому что контента мало и он не занимает всю высоту экрана. Нужно растянуть основной блок: flex: 1 или строка 1fr в grid.
Да, нужно найти обёртку темы (обычно .site или #page) и задать ей flex-колонку и min-height. Правки — в дочерней теме.
При fixed он перекроет контент — задайте контенту нижний отступ. При flex-подходе высота футера не мешает.
При flex-подходе достаточно min-height: 100vh у обёртки. height: 100% нужен только для «процентного» способа.
Итоги
- Лучший способ — flex-колонка +
min-height: 100vh+margin-top: auto. - Альтернатива — grid с строкой
1fr. - Сбрасывайте
marginуbody. - На мобильных учитывайте панели браузера (
100dvh).
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.