Минимальная высота

В SIMAI Framework с помощью модификаторов можно задать минимальную высоту элемента.

Классы

Класс Значение
min-h-0 height-min: 0;
min-h-full height-min: 100%;
min-h-screen height-min: 100vw;
min-h-min height-min: min-content;
min-h-max height-min: max-content;
min-h-fit height-min: fit-content;

Описание

Адаптивный модификатор. Изменяет минимальную высоту в зависимости от размера области просмотра.

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • min-h-0 - минимальная высота равна нулю;
    • min-h-full - минимальная высота равная высоте родительского элемента;
    • min-h-screen - минимальная высота равная высоте экрана;
    • min-h-min - минимальная высота равна внутренней минимальной предпочтительной высоте;
    • min-h-max - минимальная высота равна внутренней максимальной предпочтительной высоте;
    • min-h-fit - минимальная высота равна наибольшему из:
      • внутренней минимальной высоты,
      • меньшему из внутренней предпочтительной высоты и доступной высоты.

На всю высоту

Модификатор min-h-full устанавливает минимальную высоту исходя из высоты родителя.

min-h-full
<div class="h-f1">
	<div class="min-h-full"></div>
</div>

Высота экрана

Модификатор min-h-screen устанавливает минимальную высоту исходя из высоты экрана.

min-h-screen
<div class="min-h-screen"></div>

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

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

Например, используйте модификатор md:min-h-0 для установки минимальной высоты равной нулю для экранов размером Medium и больше.

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

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью