Sticky footer

Футер всегда прижат к нижнему краю экрана — даже если контента мало; при большом контенте уходит вниз вместе со страницей.

Задача

На страницах с малым количеством контента (404, логин) футер «плавает» посередине экрана. Нужно, чтобы он всегда был внизу, но не перекрывал контент при скролле.

Решение

Способ 1 — Flexbox (рекомендуемый)

<body>
  <header>Шапка</header>
  <main>Контент</main>
  <footer>Футер</footer>
</body>

* { box-sizing: border-box; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1; /* растягивается и заполняет пространство между header и footer */
}

header { background: #1e40af; color: #fff; padding: 16px 24px; }
main   { padding: 24px; }
footer { background: #1e293b; color: #fff; padding: 16px 24px; text-align: center; }

Способ 2 — CSS Grid

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Разметка та же: header, main, footer. Средняя строка 1fr растягивается.

Способ 3 — position: sticky (для sticky внутри scroll)

Этот вариант подходит, если футер должен прилипать внутри контейнера во время скролла:

footer {
  position: sticky;
  bottom: 0;
}

Ключевые моменты

  • min-height: 100vh на body — ключевое; без него flex/grid не даст нужного эффекта.
  • flex: 1 на main — делает контентную область резиновой; footer остаётся внизу.
  • Flexbox-способ проще и достаточен в 99% случаев.
  • position: sticky; bottom: 0 — другой паттерн: футер всегда виден при скролле внутри контейнера (footer bar).

Варианты

  • Если в проекте уже используется dvh (dynamic viewport height): замени 100vh на 100dvh — корректно работает с адресной строкой мобильного браузера.

Связанные рецепты / темы