В CSS свойство max-height Calc(100vh – 210px) — это мощный инструмент, который позволяет вам установить максимальную высоту элемента на основе высоты области просмотра минус определенное значение. Этот динамический расчет обеспечивает гибкость и оперативность вашего веб-дизайна. В этой статье мы рассмотрим различные варианты использования этого свойства и предоставим примеры кода для каждого метода.

1. Создание адаптивных контейнеров.
   Одним из распространенных вариантов использования «max-height Calc(100vh – 210px)» является создание адаптивных контейнеров, высота которых регулируется в зависимости от доступного пространства области просмотра. Это особенно полезно при создании макетов с фиксированными верхними или нижними колонтитулами. Вот пример:

.container {
  max-height: calc(100vh - 210px);
  overflow: auto;
}

2. Прокручиваемые боковые панели.
   Вы также можете использовать «max-height Calc(100vh – 210px)» для создания прокручиваемых боковых панелей, которые адаптируются к высоте области просмотра. Это удобно для навигационных меню или панелей контента. Вот пример:

.sidebar {
  max-height: calc(100vh - 210px);
  overflow-y: auto;
}

3. Динамические модальные окна.
   При создании модальных окон или всплывающих диалоговых окон вы можете использовать «max-height Calc(100vh – 210px)», чтобы гарантировать, что модальное окно остается в пределах видимой части области просмотра, независимо от его размера. Высота содержимого. Вот пример:

.modal {
  max-height: calc(100vh - 210px);
  overflow-y: auto;
}

4. Гибкие главные разделы.
   Главные разделы часто содержат большие фоновые изображения или видео. Используя «max-height Calc(100vh – 210px)», вы можете гарантировать, что главный раздел регулирует свою высоту в соответствии с оставшимся пространством области просмотра, обеспечивая визуально привлекательный и захватывающий опыт. Вот пример:

.hero-section {
  max-height: calc(100vh - 210px);
}

5. Прикрепленные нижние колонтитулы.
   Чтобы создать прикрепленный нижний колонтитул, который остается внизу области просмотра, даже если контент короче, вы можете использовать «max-height Calc(100vh – 210px)». Вот пример:

html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -210px;
}
.content {
  padding-bottom: 210px;
}
.footer {
  height: 210px;
}

Свойство CSS «max-height Calc(100vh – 210px)» предлагает универсальное решение для обработки динамических вычислений высоты на основе размеров области просмотра. От адаптивных контейнеров до липких нижних колонтитулов — это свойство позволяет веб-разработчикам создавать гибкие и адаптивные проекты. Понимая различные приложения и используя предоставленные примеры кода, вы можете улучшить свои веб-проекты, повысив скорость реагирования и удобство для пользователей.