Высота
height
sm
md
lg
xl
В SIMAI Framework с помощью модификаторов можно задать высоту элемента.
Классы
| Класс | Значение |
|---|---|
h-auto |
height: auto;
|
h-1/2 |
height: 50%;
|
h-1/3 |
height: 33.333333%;
|
h-2/3 |
height: 66.666667%;
|
h-1/4 |
height: 25%;
|
h-2/4 |
height: 50%;
|
h-3/4 |
height: 75%;
|
h-1/5 |
height: 20%;
|
h-2/5 |
height: 40%;
|
h-3/5 |
height: 60%;
|
h-4/5 |
height: 80%;
|
h-1/6 |
height: 16.666667%;
|
h-2/6 |
height: 33.333333%;
|
h-3/6 |
height: 50%;
|
h-4/6 |
height: 66.666667%;
|
h-5/6 |
height: 83.333333%;
|
h-full |
height: 100%;
|
h-screen |
height: 100vw;
|
h-screen-1/2 |
height: 50vh;
|
h-screen-1/3 |
height: 33.333333vh;
|
h-screen-2/3 |
height: 66.666667vh;
|
h-screen-1/4 |
height: 25vh;
|
h-screen-2/4 |
height: 50vh;
|
h-screen-3/4 |
height: 75vh;
|
h-min |
height: min-content;
|
h-max |
height: max-content;
|
h-fit |
height: fit-content;
|
h-px |
height: 1px;
|
h-0 |
height: 0;
|
h-a0 |
height: var(--sf-size--a-0);
|
h-a1 |
height: var(--sf-size--a-1);
|
h-a2 |
height: var(--sf-size--a-2);
|
h-a3 |
height: var(--sf-size--a-3);
|
h-a4 |
height: var(--sf-size--a-4);
|
h-a5 |
height: var(--sf-size--a-5);
|
h-a6 |
height: var(--sf-size--a-6);
|
h-a7 |
height: var(--sf-size--a-7);
|
h-a8 |
height: var(--sf-size--a-8);
|
h-a9 |
height: var(--sf-size--a-9);
|
h-b0 |
height: var(--sf-size--b-0);
|
h-b1 |
height: var(--sf-size--b-1);
|
h-b2 |
height: var(--sf-size--b-2);
|
h-b3 |
height: var(--sf-size--b-3);
|
h-b4 |
height: var(--sf-size--b-4);
|
h-b5 |
height: var(--sf-size--b-5);
|
h-b6 |
height: var(--sf-size--b-6);
|
h-b7 |
height: var(--sf-size--b-7);
|
h-b8 |
height: var(--sf-size--b-8);
|
h-b9 |
height: var(--sf-size--b-9);
|
h-c0 |
height: var(--sf-size--c-0);
|
h-c1 |
height: var(--sf-size--c-1);
|
h-c2 |
height: var(--sf-size--c-2);
|
h-c3 |
height: var(--sf-size--c-3);
|
h-c4 |
height: var(--sf-size--c-4);
|
h-c5 |
height: var(--sf-size--c-5);
|
h-c6 |
height: var(--sf-size--c-6);
|
h-c7 |
height: var(--sf-size--c-7);
|
h-c8 |
height: var(--sf-size--c-8);
|
h-c9 |
height: var(--sf-size--c-9);
|
h-d0 |
height: var(--sf-size--d-0);
|
h-d1 |
height: var(--sf-size--d-1);
|
h-d2 |
height: var(--sf-size--d-2);
|
h-d3 |
height: var(--sf-size--d-3);
|
h-d4 |
height: var(--sf-size--d-4);
|
h-d5 |
height: var(--sf-size--d-5);
|
h-d6 |
height: var(--sf-size--d-6);
|
h-d7 |
height: var(--sf-size--d-7);
|
h-d8 |
height: var(--sf-size--d-8);
|
h-d9 |
height: var(--sf-size--d-9);
|
h-e0 |
height: var(--sf-size--e-0);
|
h-e1 |
height: var(--sf-size--e-1);
|
h-e2 |
height: var(--sf-size--e-2);
|
h-e3 |
height: var(--sf-size--e-3);
|
h-e4 |
height: var(--sf-size--e-4);
|
h-e5 |
height: var(--sf-size--e-5);
|
h-e6 |
height: var(--sf-size--e-6);
|
h-e7 |
height: var(--sf-size--e-7);
|
h-e8 |
height: var(--sf-size--e-8);
|
h-e9 |
height: var(--sf-size--e-9);
|
h-f0 |
height: var(--sf-size--f-0);
|
h-f1 |
height: var(--sf-size--f-1);
|
h-f2 |
height: var(--sf-size--f-2);
|
h-f3 |
height: var(--sf-size--f-3);
|
h-f4 |
height: var(--sf-size--f-4);
|
h-f5 |
height: var(--sf-size--f-5);
|
h-f6 |
height: var(--sf-size--f-6);
|
h-f7 |
height: var(--sf-size--f-7);
|
h-f8 |
height: var(--sf-size--f-8);
|
h-f9 |
height: var(--sf-size--f-9);
|
h-g0 |
height: var(--sf-size--g-0);
|
h-g1 |
height: var(--sf-size--g-1);
|
h-g2 |
height: var(--sf-size--g-2);
|
h-g3 |
height: var(--sf-size--g-3);
|
h-g4 |
height: var(--sf-size--g-4);
|
h-g5 |
height: var(--sf-size--g-5);
|
h-g6 |
height: var(--sf-size--g-6);
|
h-g7 |
height: var(--sf-size--g-7);
|
h-g8 |
height: var(--sf-size--g-8);
|
h-g9 |
height: var(--sf-size--g-9);
|
h-h0 |
height: var(--sf-size--h-0);
|
h-h1 |
height: var(--sf-size--h-1);
|
h-h2 |
height: var(--sf-size--h-2);
|
h-h3 |
height: var(--sf-size--h-3);
|
h-h4 |
height: var(--sf-size--h-4);
|
h-h5 |
height: var(--sf-size--h-5);
|
h-h6 |
height: var(--sf-size--h-6);
|
h-h7 |
height: var(--sf-size--h-7);
|
h-h8 |
height: var(--sf-size--h-8);
|
h-h9 |
height: var(--sf-size--h-9);
|
h-i0 |
height: var(--sf-size--i-0);
|
h-i1 |
height: var(--sf-size--i-1);
|
h-i2 |
height: var(--sf-size--i-2);
|
h-i3 |
height: var(--sf-size--i-3);
|
h-i4 |
height: var(--sf-size--i-4);
|
h-i5 |
height: var(--sf-size--i-5);
|
h-i6 |
height: var(--sf-size--i-6);
|
h-i7 |
height: var(--sf-size--i-7);
|
h-i8 |
height: var(--sf-size--i-8);
|
h-i9 |
height: var(--sf-size--i-9);
|
Описание
Адаптивный модификатор. Изменяет высоту в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
h-0- высота равна нулю;h-px- высота равна1px;h-a0...h-i9- высота равна фиксированным размерам из системы размеров фреймворка;h-1/2...h-5/6- высота равна доли ширины родительского элемента;h-auto- автоматическая высота;h-full- высота равная высоте родительского элемента;h-screen- высота равная высоте экрана;h-screen-1/2...h-screen-3/4- высота равная указанной доли высоты экрана;h-min- высота равна внутренней минимальной предпочтительной высоте;h-max- высота равна внутренней максимальной предпочтительной высоте;h-fit- высота равна наибольшему из:- внутренней минимальной высоты,
- меньшему из внутренней предпочтительной высоты и доступной высоты.
Фиксированная высота
Фиксированная высота позволяет точно задать размер элемента. Для фиксированной высоты используется система размеров.
h-c1h-c4h-c7h-d1h-d4h-d7h-e1<div class="h-c1"></div>
<div class="h-c4"></div>
<div class="h-c7"></div>
<div class="h-d1"></div>
<div class="h-d4"></div>
<div class="h-d7"></div>
<div class="h-e1"></div>
Относительная высота
Относительную высоту рекомендуется использовать когда необходимо чтобы высота элемента зависила от высоты родительского элемента.
Совместно с flexbox относительую ширину можно использовать для построения одномерной вертикальной сетки.
h-1/2
h-1/2
h-3/5
h-2/5
h-2/3
h-1/3
h-4/5
h-1/5
h-5/6
h-1/6
w-full
<div class="flex">
<div class="h-1/2"></div><div class="h-1/2"></div>
<div class="h-2/5"></div><div class="h-3/5"></div>
<div class="h-1/3"></div><div class="h-2/3"></div>
<div class="h-1/5"></div><div class="h-4/5"></div>
<div class="h-1/6"></div><div class="h-5/6"></div>
<div class="w-full"></div>
</div>
Автоматическая высота
Модификатор h-auto устанавливает высоту исходя из высоты контента.
Lorem ipsum dolor sit amet, consectetur
<div class="w-d6">
<div class="h-auto">Lorem ipsum dolor sit amet, consectetur</div>
</div>
Высота экрана
Модификаторы h-screen, h-screen-1/2 ... h-screen-3/4 устанавливает высоту исходя из высоты экрана.
h-screen-1/3h-screen-1/2h-screen-2/3h-screen-3/4h-screen <div class="h-screen-1/3"></div>
<div class="h-screen-1/2"></div>
<div class="h-screen-2/3"></div>
<div class="h-screen-3/4"></div>
<div class="h-screen"></div>
Адаптивность
Для установки высоты, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.
Например, используйте модификатор md:h-1/2 для установки высоты в 50% для экранов размером Medium и больше.
<div class="md:h-1/2"></div>
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.