Как закрепить footer снизу страницы?

Способы закрепления footer снизу страницы

Это одна из классических задач в верстке. Footer должен находиться внизу страницы, но при этом не должен «прилипать» к контенту, если контента мало. Есть несколько современных решений.

1. Flexbox (современный и популярный способ)

Это наиболее надежный и универсальный способ. Используем flexbox на контейнере с направлением column и растягиваем основной контент.

// HTML структура
<div class="layout">
  <header>Header</header>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

// CSS
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;  /* Растягивает main на все доступное пространство */
}

Преимущество: простая, работает во всех современных браузерах, семантически правильно.

2. CSS Grid

Также хороший способ с использованием Grid. Определяем 3 зоны и даем основному контенту всю оставшуюся высоту.

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

header {
  grid-row: 1;
}

main {
  grid-row: 2;
}

footer {
  grid-row: 3;
}

Это немного более многословно, но дает больше контроля над макетом.

3. Абсолютное позиционирование (не рекомендуется)

Действует только если footer имеет фиксированную высоту.

body {
  position: relative;
  min-height: 100vh;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;  /* Фиксированная высота */
}

main {
  padding-bottom: 100px;  /* Чтобы контент не перекрывался */
}

Недостатки: требует фиксированной высоты, сложнее с адаптивностью, не очень семантично.

4. Фиксированное позиционирование

Для footer, который должен всегда быть видна внизу экрана.

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: white;
  z-index: 100;
}

body {
  padding-bottom: 100px;  /* Высота footer */
}

Используется для прилипающих footer (sticky footer), но не для обычного внизу страницы.

Реальный пример в Next.js / React

Вот как это обычно реализуется в современном React приложении:

// components/layout/Layout.tsx
import React from react;
import { cn } from @/lib/utils;

interface LayoutProps {
  children: React.ReactNode;
}

export function Layout({ children }: LayoutProps) {
  return (
    <div className="flex flex-col min-h-screen">
      <header className="bg-surface-primary border-b border-border-secondary">
        {/* Header content */}
      </header>
      
      <main className="flex-1">
        {children}
      </main>
      
      <footer className="bg-surface-secondary border-t border-border-secondary mt-auto">
        {/* Footer content */}
      </footer>
    </div>
  );
}

В Tailwind CSS:

• min-h-screen — минимальная высота 100vh
• flex flex-col — флексбокс с направлением column
• flex-1 на main — растягивает на все доступное место
• mt-auto на footer — альтернативный способ (margin-top: auto)

5. Sticky footer с использованием mt-auto

Это еще один способ в Tailwind, используя margin-top: auto:

<div className="flex flex-col min-h-screen">
  <header>Header</header>
  <main>Main</main>
  <footer className="mt-auto">Footer</footer>
</div>

Лучшая практика

Для современной разработки рекомендуется использовать flexbox решение (способ 1 или 5). Это:

• Просто и понятно
• Работает во всех браузерах
• Гибко и легко адаптируется к разным экранам
• Не требует фиксированных высот

В Tailwind CSS это выглядит как:

min-h-screen flex flex-col

На контейнере, и

flex-1

На основном контенте. Просто и элегантно.