Получить профессию в Skypro
Размещение контейнера на всю высоту минус 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() на практике:
Вообразите, что ваш экран – это чистая холст:
```markdown
🔳 Шапка
| |
| |
| 🥛🥛🥛🥛 |
| Контент |
Шапка представлена в виде небольшого цветного блока вверху. Вы хотите заполнить оставшееся пространство основным содержимым:
css .content { height: calc(100% – высота_шапки); }
В итоге ваш сайт превратится в гармоничное произведение дизайнерского искусства 🎨.
### Задачи из практики
В реальной жизни приходится сталкиваться с нетривиальными ситуациями, например, с липкими шапками или динамическим контентом:
- Используя `position: sticky` и свойство `top`, вы можете настроить содержимое так, чтобы оно прокручивалось под шапкой.
- При динамическом контенте вы возможно потребуется использовать JavaScript для корректировки отступов или полей.
### Расширение возможностей содержимого
Если вам нужно, чтобы содержимое прокручивалось независимо от шапки, существуют следующие способы:
- Свойство `overflow: auto;` в контейнере позволяет содержимому прокручиваться независимо.
- Фиксированное позиционирование с `top`, `bottom` и `overflow: auto;` создаёт прокручиваемый контент, который занимает пространство в соответствии с шапкой.
## Полезные материалы
1. [Полное руководство по Flexbox | CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) — Всё, что вам нужно знать о гибкости компоновки с помощью flexbox.
2. [Функция calc() – CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) — Примеры использования calc() для вычислений в CSS.
3. [Полное руководство по CSS Grid | CSS-Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/) — Начало работы с компоновкой с использованием CSS Grid.
4. [Адаптивный веб-дизайн и параметры окна просмотра | w3schools](https://www.w3schools.com/css/css_rwd_viewport.asp) — Использование единиц вьюпорта в адаптивном дизайне.
5. [Масштабирование с помощью единиц vw и vh в CSS3 | Snook.ca](https://snook.ca/archives/html_and_css/vm-vh-units) — Как использовать единицы vw и vh для создания адаптивных макетов.
6. [CSS "position: sticky" – Введение и полифиллы | SitePoint](https://www.sitepoint.com/css-position-sticky-introduction-polyfills/) — Как применять липкое позиционирование в современном веб-дизайне.
7. [Современные CSS-решения | Modern CSS Solutions](https://moderncss.dev/) — Обзор современных методов решения CSS-задач.