Заполнение экрана элементом HTML: CSS для header и content

Быстрый ответ

Если требуется добиться того, чтобы элемент занимал всю оставшуюся высоту экрана, для него следует применить значение flex: 1. Родитель элемента при этом должен быть обозначен как display: flex и поддерживать flex-direction: column. Явная указанность высоты родителя в этом случае не требуется – flex: 1 обеспечивает занятие дочерним элементом всего свободного пространства по вертикали.

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Занимающее всю возможную высоту в области просмотра */
  margin: 0;
}

.content {
  flex: 1; /* Расширение на всё доступное пространство */
}

<div class="container">
  <header>Заголовок</header>
  <main class="content">Основной контент растянется на всю оставшуюся высоту.</main>
  <footer>Футер</footer>
</div>

Основной контент займет все пространство между заголовком и футером, будто пицца, которая расползается по размеру коробки.

Совместимость с устройствами

В мире веб-дизайна не уйтешь от многообразия устройств. Применение min-height: 100vh; позволит адаптацию элемента к различным размерам экранов, занимая, по крайней мере, полную высоту области просмотра. Для обеспечения более надежной совместимости со старыми версиями браузеров можно использовать min-height: 100%; на теге body.

Если ваша шапка зафиксирована, высоту содержимого можно отрегулировать с помощью CSS-функции calc:

.content {
  min-height: calc(100vh – var(--header-height)); /* Уменьшаем на размер шапки */
}

Можно также определить CSS-переменную --header-height для упрощения расчета.

Советы по адаптивному дизайну

Выбор гибкости

При адаптивном дизайне важно использовать min-height вместо height, чтобы контент мог натурально расширяться без посредничества JavaScript.

Управление переполнением

Если содержимое может превышать размер области просмотра, стоит использовать overflow: auto;, что вызывает появление полос прокрутки только когда это необходимо:

.content {
  overflow: auto; /* Контролируем полосы прокрутки */
}

Структурирование через контейнеры

Размещение шапки и контента в один общий контейнер поможет упорядочить структуру верстки и упрощает восприятие потока документа:

.wrapper {
  display: flex;
  flex-direction: column;
}

.header {
  /* Стили для шапки */
}

.content {
  flex: 1;
  min-height: 0; /* Избегаем исчезновения невысокого содержимого */
  overflow-y: auto; /* Прокручиваем по вертикали */
}

Визуализация

Веб-страница – это постройка, состоящая из различных "этажей":

🏢::before { content: "Крыша"; height: 10%; }
🏢 Этаж 1 | Content | Высота: 20%
🏢::after  { content: "Фундамент"; height: 70%; }

• 🏢::before — это наша "крыша", то есть шапка.
• 🏢 Этаж 1 — это "жилое пространство", наш контент.
• 🏢::after — это "фундамент", оставшееся свободное пространство.

Цель — преобразовать фундамент в элемент, занимающий все доступное пространство:

/* Волшебная вставка */
.building::after {
  height: calc(100% – 30%); /* 100% за вычетом высоты шапки и контента */
}

Таким образом, фундамент заполнит всё необходимое пространство, подстроившись под контейнер.

Преодоление ограничений CSS

Относительно совместимости

"С великой силой идет великая ответственность", и единицы vh здесь не исключение. Если ваши амбиции связаны со старыми браузерами, полезно иметь запасные варианты.

Применение единиц относительно области просмотра

Единицы vh, vw и даже vmax идеально подходят для современных адаптивных дизайнов, однако vmax может породить непредсказуемые ситуации в некоторых браузерах.

Даете ли вы приоритет прогрессивному улучшению контента?

Отдавая предпочтение CSS перед JavaScript вы помогаете не только в производительности, но и облегчаете поддержку кода. Тогда как JavaScript может выступать в роли поддержки, если CSS не может справиться с задачей.

Полезные материалы

1. Основы flexbox в CSS | MDN — MDN предлагает руководство по flex-макетированию.
2. Типографика с использованием размеров области просмотра | CSS-Tricks — Контролирование типографики с применением единиц относительно области просмотра.
3. Десять макетов всего в одной строке CSS | Web.dev — Изучите как заполнить высоту экрана с помощью однострочных решений CSS.
4. Почему процентная высота в CSS иногда не работает? | Stack Overflow — Обсуждение особенностей процентной высоты в CSS и решение возможных проблем.