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

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

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

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

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

Синтаксисlink

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

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

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

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

Примерыlink

На всю высоту родителя:link

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

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

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

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

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

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

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