Размещение контейнера на всю высоту минус header в HTML и CSS

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

Если вы хотите чтобы основное содержимое сайта автоматически подстраивалось под высоту шапки, вам пригодится комбинация единиц измерения vh и функции calc() из CSS. Вот пример:

.container {
  height: calc(100vh – 50px); /* Замените 50px на высоту вашей шапки */
}

Таким образом, контейнер займёт всю высоту вьюпорта (100vh), учитывая высоту шапки. Область содержимого точно впишется в оставшееся свободное пространство.

Примечание: Для корректной работы функции calc(), убедитесь, что между оператором вычитания - и другими элементами есть пробелы. Это позволит избежать проблем с некоторыми браузерами.

Расшифровываем vh и calc()

Термин 1vh означает 1% от высоты вьюпорта. С помощью функции calc() можно выполнять вычисления прямо в CSS, что обеспечивает больше контроля над компоновкой.

Гибкость с CSS Flexbox

Если вы ищете более гибкую адаптивность при макетировании, обратите внимание на Flexbox. Вот как можно организовать содержимое, имея шапку в контейнере с Flexbox:

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header {
  /* Стили шапки */
}
.main-content {
  flex: 1; /* Займёт весь оставшийся свободный объём */
  overflow: auto; /* Если нужно, добавляется прокрутка */
}

Подробнее об этом расскажет наш спикер на видео

Познакомимся с CSS Grid

Если CSS Flexbox – это музыка импровизаций, то CSS Grid – это дирижирование оркестром. С CSS Grid всё становится точным и чётким:

body {
  display: grid;
  grid-template-rows: 50px 1fr; 
  height: 100vh;
  margin: 0;
}
header {
  grid-row: 1;
}
.main-content {
  grid-row: 2;
  overflow: auto; /* Добавляет прокрутку содержимому */
}

Когда CSS вас оставляет в затруднении

Если CSS не может вам помочь, на помощь приходит JavaScript. Он особенно полезен, если необходимо динамически подстраивать макет при изменении размеров шапки:

window.onresize = function() {
  var headerHeight = document.querySelector('header').offsetHeight;
  var content = document.querySelector('.main-content');
  content.style.height = `calc(100vh – ${headerHeight}px)`;
};

Как справиться с проблемами устаревших браузеров

О тех временах, когда мы мучались из-за старых версий IE, все мы помним с ужасом. Для устаревших браузеров можно применить альтернативные подходы, такие как абсолютное позиционирование с отступами, и дополнить их JavaScript, чтобы везде calc() работал верно.

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

Попробуйте визуализировать, как работает calc() на практике:

Вообразите, что ваш экран – это чистая холст:

==============
🔳 Шапка
==============
|            |
|            |
|  🥛🥛🥛🥛  |
|  Контент   |
==============

Шапка представлена в виде небольшого цветного блока вверху. Вы хотите заполнить оставшееся пространство основным содержимым:

.content {
  height: calc(100% – высота_шапки);
}

В итоге ваш сайт превратится в гармоничное произведение дизайнерского искусства 🎨.

Задачи из практики

В реальной жизни приходится сталкиваться с нетривиальными ситуациями, например, с липкими шапками или динамическим контентом:

• Используя position: sticky и свойство top, вы можете настроить содержимое так, чтобы оно прокручивалось под шапкой.
• При динамическом контенте вы возможно потребуется использовать JavaScript для корректировки отступов или полей.

Расширение возможностей содержимого

Если вам нужно, чтобы содержимое прокручивалось независимо от шапки, существуют следующие способы:

• Свойство overflow: auto; в контейнере позволяет содержимому прокручиваться независимо.
• Фиксированное позиционирование с top, bottom и overflow: auto; создаёт прокручиваемый контент, который занимает пространство в соответствии с шапкой.

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

1. Полное руководство по Flexbox | CSS-Tricks — Всё, что вам нужно знать о гибкости компоновки с помощью flexbox.
2. Функция calc() – CSS | MDN — Примеры использования calc() для вычислений в CSS.
3. Полное руководство по CSS Grid | CSS-Tricks — Начало работы с компоновкой с использованием CSS Grid.
4. Адаптивный веб-дизайн и параметры окна просмотра | w3schools — Использование единиц вьюпорта в адаптивном дизайне.
5. Масштабирование с помощью единиц vw и vh в CSS3 | Snook.ca — Как использовать единицы vw и vh для создания адаптивных макетов.
6. CSS "position: sticky" – Введение и полифиллы | SitePoint — Как применять липкое позиционирование в современном веб-дизайне.
7. Современные CSS-решения | Modern CSS Solutions — Обзор современных методов решения CSS-задач.