← Все вопросы
Как прижать футер к низу страницы, если контента мало?
14
Когда на странице много текста — футер внизу как надо. Но если контента мало, футер «подскакивает» к середине, а под ним пустота. Как сделать, чтобы он всегда был внизу, но не fixed?
3 ответа
19
✓ Принятый ответ — помог автору
Классический «sticky footer» через флекс на body. Делаешь страницу колонкой на всю высоту экрана, а основной контент заставляешь занять всё свободное место:
body {
min-height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
}
main {
flex: 1; /* съедает всё свободное место, отталкивая футер вниз */
}
Теперь футер всегда внизу: если контента мало — main растянется и подопрёт его, если много — страница просто проскроллится. Никакого position: fixed, футер не липнет поверх контента.
Denis Fadin 100dvh вместо 100vh на мобилках, чтобы не прыгало из-за адресной строки · 20 месяцев назад
7
Можно и через grid: body { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; } — шапка, контент, футер.
4
Через флекс: main { flex: 1 }.
Ваш ответ
Войдите, чтобы ответить на вопрос.
