Максимальная высота (max-height)link

https://dev.ru.simai.io/ru/ui/utility/size/max-height.php

В SIMAI Framework с помощью модификаторов можно ограничить максимальную высоту элемента. Это позволяет избежать чрезмерного растягивания блока при большом объёме контента, сохранив при этом адаптивность интерфейса.

Таблица классовlink

Класс Значение
.max-h-full max-height: 100%;
.max-h-screen max-height: 100vh;
.max-h-px max-height: 1px;
.max-h-0 max-height: 0;
. max-h-min max-height: min-content;
.max-h-max max-height: max-content;
.max-h-fit max-height: fit-content;
.max-h-a0 ... .max-h-i9 Фиксированные размеры из системы фреймворка

Синтаксисlink

Использование: {контрольная точка}:{модификатор} или просто {модификатор}

  • Контрольная точка (необязательный параметр):
    Применяет модификатор начиная с определённого размера экрана (sm, md, lg, xl).
    Если не указана, модификатор действует для всех размеров экрана.

  • Модификатор (обязательный параметр):

    • max-h-0 - максимальная высота равна нулю
    • max-h-(a0...i9) - максимальная высота равна фиксированным размерам из системы размеров
    • max-h-full - максимальная высота равна высоте родительского элемента
    • max-h-screen - максимальная высота равна высоте экрана
    • max-h-min - максимальная высота равна внутренней минимальной предпочтительной высоте
    • max-h-max - максимальная высота равна внутренней максимальной предпочтительной высоте
    • max-h-fit - максимальная высота равна наибольшему из внутренней минимальной высоты и наименьшей из внутренней предпочтительной высоты и доступной высоты

Пример использования фиксированной высотыlink

<div class="flex">
	<div class="max-h-d1 grow"></div>
	<div class="max-h-d4 grow"></div>
	<div class="max-h-d7 grow"></div>
	<div class="max-h-e1 grow"></div>
	<div class="max-h-e4 grow"></div>
</div>

В данном примере для разных блоков установлены разные фиксированные максимальные высоты, используя систему размеров фреймворка.

Адаптивностьlink

Для установки максимальной высоты начиная с определённого размера экрана, используйте контрольную точку:

<div class="md:max-h-0"></div>

В этом примере максимальная высота будет равна нулю (max-h-0) при ширине экрана md и больше.