PrepBro
← Назад к вопросам

Как растянуть section по высоте всего body?

2.0 Middle🔥 201 комментариев
#JavaScript Core

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI3 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Растяжение section по высоте всего body

Это частая задача в веб-разработке. Расскажу несколько способов и объясню как они работают.

Проблема

По умолчанию section занимает столько высоты, сколько нужно его содержимому. Если содержимого мало, section не растягивается на всю высоту экрана:

<!-- Исходная разметка -->
<body>
  <header>Header</header>
  <section class="main">Content</section>
  <footer>Footer</footer>
</body>

Способ 1: flexbox (рекомендуется)

Отличный способ, работает во всех современных браузерах:

/* HTML структура:
   <body>
     <header>Header</header>
     <main class="main-content">Content</main>
     <footer>Footer</footer>
   </body>
*/

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* минимум высота экрана */
  margin: 0;
  padding: 0;
}

header {
  flex-shrink: 0; /* не сжимается */
  background: #f5f5f5;
  padding: 20px;
}

.main-content {
  flex: 1; /* занимает оставшееся место */
  display: flex;
  flex-direction: column;
}

footer {
  flex-shrink: 0; /* не сжимается */
  background: #f5f5f5;
  padding: 20px;
  text-align: center;
}

Как это работает:

  • display: flex; flex-direction: column - стопка элементов по вертикали
  • min-height: 100vh - минимум в полный экран
  • flex: 1 на main - берёт всё оставшееся место
  • flex-shrink: 0 на header/footer - запрещает им сжиматься

Преимущества:

  • Простой, понятный синтаксис
  • Хорошо работает с responsive дизайном
  • Современный стандарт

Способ 2: Grid

Ещё один современный способ:

body {
  display: grid;
  grid-template-rows: auto 1fr auto; /* header, main, footer */
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

header {
  background: #f5f5f5;
  padding: 20px;
}

.main-content {
  /* Автоматически займет оставшееся место */
  display: flex;
  flex-direction: column;
}

footer {
  background: #f5f5f5;
  padding: 20px;
}

Как это работает:

  • grid-template-rows: auto 1fr auto - три строки:
    • auto - header занимает столько, сколько нужно
    • 1fr - main занимает оставшееся место (1 fraction)
    • auto - footer занимает столько, сколько нужно

Способ 3: Absolute positioning (старый способ)

Менее рекомендуется, но всё ещё используется:

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

body {
  position: relative;
}

header {
  height: 60px;
  background: #f5f5f5;
}

.main-content {
  position: absolute;
  top: 60px; /* начинается после header */
  bottom: 60px; /* заканчивается перед footer */
  left: 0;
  right: 0;
  overflow-y: auto;
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #f5f5f5;
}

Недостатки:

  • Нужно знать высоту header и footer
  • Сложнее с responsive дизайном
  • Не рекомендуется для новых проектов

Практические примеры

Пример 1: Страница с фиксированным header

/* HTML:
   <body>
     <nav class="navbar">Navigation</nav>
     <main class="main">Content here</main>
     <footer>Footer</footer>
   </body>
*/

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

.navbar {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 16px;
  z-index: 100;
}

.main {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

footer {
  flex-shrink: 0;
  background: #f5f5f5;
  padding: 20px;
  text-align: center;
}

Пример 2: Две колонки с растянутой боковой панелью

/* HTML:
   <body>
     <header>Header</header>
     <div class="container">
       <aside class="sidebar">Sidebar</aside>
       <main class="content">Main content</main>
     </div>
     <footer>Footer</footer>
   </body>
*/

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

header {
  flex-shrink: 0;
  padding: 20px;
  background: #f5f5f5;
}

.container {
  flex: 1;
  display: flex;
  gap: 0;
}

.sidebar {
  flex-shrink: 0;
  width: 250px;
  background: #f0f0f0;
  padding: 20px;
  overflow-y: auto;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

footer {
  flex-shrink: 0;
  padding: 20px;
  background: #f5f5f5;
}

Пример 3: Responsive версия

/* Desktop */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

header {
  flex-shrink: 0;
  padding: 20px;
}

.main {
  flex: 1;
  display: flex;
  gap: 20px;
}

.sidebar {
  flex: 0 0 250px; /* Фиксированная ширина */
  overflow-y: auto;
}

.content {
  flex: 1;
  overflow-y: auto;
}

footer {
  flex-shrink: 0;
  padding: 20px;
}

/* Мобильная версия */
@media (max-width: 768px) {
  .main {
    flex-direction: column;
  }
  
  .sidebar {
    flex: 0 0 auto;
    order: 2; /* Sidebar ниже content */
  }
  
  .content {
    order: 1; /* Content выше sidebar */
  }
}

Частые ошибки

Ошибка 1: забыли установить высоту родителя

/* НЕПРАВИЛЬНО */
body {
  display: flex;
  flex-direction: column;
  /* min-height: 100vh забыли! */
}

/* ПРАВИЛЬНО */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Важно! */
}

Ошибка 2: забыли обнулить margin/padding

/* НЕПРАВИЛЬНО */
body {
  min-height: 100vh;
  /* Элементы могут выше экрана из-за margin */
}

/* ПРАВИЛЬНО */
body {
  min-height: 100vh;
  margin: 0; /* Обязательно */
  padding: 0; /* И это */
}

Ошибка 3: использовать height вместо min-height

/* НЕПРАВИЛЬНО */
body {
  height: 100vh; /* Если контент больше, будет скролл */
}

/* ПРАВИЛЬНО */
body {
  min-height: 100vh; /* Вырастет если контент больше */
}

React компонент

function App() {
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      minHeight: '100vh',
      margin: 0,
      padding: 0
    }}>
      <header style={{
        flexShrink: 0,
        background: '#f5f5f5',
        padding: '20px'
      }}>
        Header
      </header>
      
      <main style={{
        flex: 1,
        padding: '20px',
        overflowY: 'auto'
      }}>
        <h1>Content</h1>
        <p>Этот контент растягивается...</p>
      </main>
      
      <footer style={{
        flexShrink: 0,
        background: '#f5f5f5',
        padding: '20px',
        textAlign: 'center'
      }}>
        Footer
      </footer>
    </div>
  );
}

Tailwind CSS версия

<body class="flex flex-col min-h-screen">
  <header class="flex-shrink-0 bg-gray-100 p-5">
    Header
  </header>
  
  <main class="flex-1 p-5 overflow-y-auto">
    <h1>Content</h1>
    <p>Растянутый контент</p>
  </main>
  
  <footer class="flex-shrink-0 bg-gray-100 p-5 text-center">
    Footer
  </footer>
</body>

Выводы

  1. Используй flexbox - самый простой и современный способ
  2. min-height: 100vh - на body/html для полной высоты
  3. flex: 1 - на main контенте, чтобы занял оставшееся место
  4. flex-shrink: 0 - на header/footer, чтобы не сжимались
  5. margin: 0; padding: 0 - обязательно обнулить на body
  6. Не используй height - используй min-height
  7. Grid тоже работает - если нужна более сложная сетка
  8. Absolute positioning - старый способ, не рекомендуется
Как растянуть section по высоте всего body? | PrepBro