Заполнение экрана элементом 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 и решение возможных проблем.