height

Примеры

Базовый пример

Используйте утилиты h-<number> типа h-24 и h-64 для установки элемента на фиксированную высоту на основе шкалы интервалов:

<div class="h-96 ...">h-96</div><div class="h-80 ...">h-80</div><div class="h-64 ...">h-64</div><div class="h-48 ...">h-48</div><div class="h-40 ...">h-40</div><div class="h-32 ...">h-32</div><div class="h-24 ...">h-24</div>

Использование процентов

Используйте утилиты h-full или h-<fraction> типа h-1/2 и h-2/5 для придания элементу высоты на основе процентов:

<div class="h-full ...">h-full</div><div class="h-9/10 ...">h-9/10</div><div class="h-3/4 ...">h-3/4</div><div class="h-1/2 ...">h-1/2</div><div class="h-1/3 ...">h-1/3</div>

Соответствие области просмотра

Используйте утилиту h-screen для того, чтобы элемент занимал всю высоту области просмотра:

<div class="h-screen">  <!-- ... --></div>

Соответствие динамической области просмотра

Используйте утилиту h-dvh для того, чтобы элемент занимал всю высоту области просмотра, которая изменяется при расширении или сжатии пользовательского интерфейса браузера:

<div class="h-dvh">  <!-- ... --></div>

Соответствие большой области просмотра

Используйте утилиту h-lvh для установки высоты элемента на максимально возможную высоту области просмотра:

<div class="h-lvh">  <!-- ... --></div>

Соответствие малой области просмотра

Используйте утилиту h-svh для установки высоты элемента на минимально возможную высоту области просмотра:

<div class="h-svh">  <!-- ... --></div>

Установка ширины и высоты одновременно

Используйте утилиты типа size-px, size-4 и size-full для одновременной установки ширины и высоты элемента:

<div class="size-16 ...">size-16</div><div class="size-20 ...">size-20</div><div class="size-24 ...">size-24</div><div class="size-32 ...">size-32</div><div class="size-40 ...">size-40</div>

Использование пользовательского значения

Используйте синтаксис h-[<value>] , чтобы задать height на основе полностью пользовательского значения:

<div class="h-[32rem] ...">  <!-- ... --></div>

Для переменных CSS вы также можете использовать синтаксис: h-(<custom-property>)

<div class="h-(--my-height) ...">  <!-- ... --></div>

Это просто сокращение, h-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a height утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<div class="h-1/2 md:h-full ...">  <!-- ... --></div>

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

Кастомизация вашей темы

Утилиты h-<number> and size-<number> управляются переменной темы --spacing, которую можно настроить в вашей собственной теме:

@theme {  --spacing: 1px; }

Подробнее о настройке шкалы интервалов читайте в документации по переменным темы.