Как прижать подвал к низу страницы
Короткий ответ
Сделайте страницу колонкой минимальной высоты в экран и дайте основной части растянуться:
<style>
.page { display: flex; flex-direction: column; min-height: 200px; border: 1px solid silver; }
.page main { flex: 1; padding: 12px; }
.page footer { padding: 8px 12px; background: gainsboro; }
</style>
<div class="page">
<main>Short content</main>
<footer>© 2026 My Site</footer>
</div>В примере высота 200px, чтобы он поместился на странице. На сайте ставьте min-height: 100vh (или 100dvh) на body.
Вариант на grid
Три строки: шапка и подвал по содержимому, середина забирает остаток:
<div style="display: grid; grid-template-rows: auto 1fr auto; min-height: 200px; border: 1px solid silver;">
<header style="background: lavender; padding: 8px;">Header</header>
<main style="padding: 8px;">Content</main>
<footer style="background: gainsboro; padding: 8px;">Footer</footer>
</div>Частая ошибка
Подвал с position: absolute; bottom: 0 или position: fixed кажется решением, пока страница короткая. Когда содержимого становится больше экрана, такой подвал наезжает на текст. Flexbox и grid выше растут вместе с содержимым и такой проблемы не имеют.
Функции из этого ответа
- min-height — Минимальная высота: элемент не ниже этой высоты, но может расти.
- flex-direction — Направление главной оси flex-контейнера: элементы в ряд или в столбик.
- flex-grow — Какую часть свободного места забирает flex-элемент.
- grid-template-rows — Количество и высота рядов сетки.