Как прижать footer к низу страницы в React: Layout и flexbox

Разработчики, только начинающие работать с React, часто сталкиваются с задачей: создать классическую разметку страницы, где wrapper, контент и footer прижат к нижнему краю. В этой статье мы разберём, почему стандартные CSS-решения не работают в React, как правильно использовать компонент Layout и избежать появления лишних div внутри корневого элемента.

Почему footer не прижимается в React?

Главная причина - поведение корневого элемента <div id='root'></div>. В React этот элемент обязателен: удаление или изменение его свойств может нарушить рендеринг. Однако многие CSS-методы (например, min-height: 100vh для body) не учитывают, что React оборачивает всё приложение в дополнительные контейнеры.

Вторая распространённая проблема - появление лишнего div внутри root. Это происходит из-за того, что React автоматически создаёт обёртку для возвращаемого JSX, если не используются фрагменты или один родительский элемент.

Создание Layout компонента с flexbox

Лучший способ прижать footer к низу - использовать компонент Layout с CSS Flexbox. Рассмотрим правильную реализацию.

Шаг 1: Базовая структура Layout

import Navbar from './Navbar';
import Footer from './Footer';
import Sidebar from './Sidebar';
import CustomCursor from './CustomCursor';
import React from 'react';

function Layout({ children }) {
  return (
    <>
      <div className='content flex-[1_0_auto]'>
        <CustomCursor/>
        <Navbar/>
        <Sidebar/>
        { children }
      </div>
      <Footer/>
    </>
  );
}

export default Layout;

Обратите внимание: мы используем фрагмент <></>, чтобы не создавать лишний div. Но этого недостаточно - нужно настроить CSS.

Шаг 2: CSS для корневого элемента и body

Добавьте в глобальный CSS (например, index.css):

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

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

Теперь root - это flex-контейнер. Компонент Layout нужно обернуть в один блок, который будет занимать всё пространство:

function Layout({ children }) {
  return (
    <div className='layout-wrapper'>
      <div className='content'>
        { children }
      </div>
      <Footer/>
    </div>
  );
}

Шаг 3: Стили для layout-wrapper

.layout-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  flex: 1;
}

.content {
  flex: 1 0 auto;
}

Ключевое свойство - flex: 1 0 auto для контента: оно заставляет блок контента расти, заполняя доступное пространство, а footer опускается вниз.

Почему появляется лишний div?

Если внутри root вы видите дополнительный div, проверьте, не оборачиваете ли вы Layout в другой компонент, который возвращает div. Также убедитесь, что вы не используете React.StrictMode - он не создаёт лишних элементов, но может влиять на отладку. Если лишний div всё равно появляется, добавьте в CSS:

#root > div {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

Этот селектор переопределит стили для любого прямого потомка root.

Альтернативные методы: Grid и Sticky Footer

Кроме flexbox, можно использовать CSS Grid:

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

Или подход Sticky Footer с отрицательными отступами, но в React надёжнее всего работает flexbox.

Заключение

Чтобы прижать footer к низу в React: настройте root на display: flex; min-height: 100vh;, создайте Layout с фрагментом и добавьте классу контента flex: 1 0 auto. Избегайте лишних обёрток - используйте фрагменты. Если лишний div всё же появляется, нацельтесь на него через CSS-селектор потомка.