К содержанию

Навигация

Главное

Содержание

Высота

Классы высоты задают свойство height. Берите их, когда элементу нужна определённая высота: точная из шкалы размеров, доля родителя с заданной высотой, высота по содержимому или высота окна просмотра.

Пример

Шкала размеров

Классы h-a0 … h-i9 берут значение из шкалы размеров: буква — группа, цифра — шаг внутри неё. Под каждым столбиком — класс, который задаёт его высоту.

h-b6
h-c6
h-d6
h-e6
h-f0

Доли родителя

Дробь — доля высоты родителя. Доля действует, только когда у родителя задана высота: здесь у пунктирной рамки — h-f0.

h-1/4
h-1/2
h-3/4
h-full

По содержимому

Во флекс-ряду элемент с h-auto растягивается на высоту ряда. h-fit, h-min и h-max задают высоту по содержимому, и элемент не растягивается.

h-auto
h-fit
h-min
h-max

Доли окна

h-screen-1/4 … h-screen-3/4 — доли высоты окна просмотра. Меняйте высоту окна: столбики меняются вместе с ней.

h-screen-1/4
h-screen-1/3

Ширина экрана

С префиксом ширины класс действует от указанной ширины и шире. Меняйте ширину окна просмотра: с ширины md полоса становится выше, с ширины xl — ещё выше.

Классы

Класс CSS Значения
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: 100vh —
h-screen-{значение} height: var(--sf-viewport-height-{значение}) small, large, dynamic
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-{значение} height: -webkit-{значение}-content; height: -moz-{значение}-content; height: {значение}-content min, max, fit
h-content-min height: -webkit-min-content; height: -moz-min-content; height: min-content —
h-content-max height: -webkit-max-content; height: -moz-max-content; height: max-content —
h-px height: 1px —
h-0 height: 0 —
h-{значение} height: var(--sf-{значение}) a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, b0, b1, b2, b3, b4, b5, b6, b7, b8, b9, c0, c1, c2, c3, c4, c5, c6, c7, c8, c9, d0, d1, d2, d3, d4, d5, d6, d7, d8, d9, e0, e1, e2, e3, e4, e5, e6, e7, e8, e9, f0, f1, f2, f3, f4, f5, f6, f7, f8, f9, g0, g1, g2, g3, g4, g5, g6, g7, g8, g9, h0, h1, h2, h3, h4, h5, h6, h7, h8, h9, i0, i1, i2, i3, i4, i5, i6, i7, i8, i9

Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:h-auto.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены.

Переменная Значение по умолчанию
--sf-viewport-height-small 100vh
--sf-viewport-height-large 100vh
--sf-viewport-height-dynamic 100vh
--sf-a0 0rem
--sf-a1 0.0625rem
--sf-a2 0.125rem
--sf-a3 0.1875rem
--sf-a4 0.25rem
--sf-a5 0.3125rem
--sf-a6 0.375rem
--sf-a7 0.4375rem
--sf-a8 0.5rem
--sf-a9 0.5625rem
--sf-b0 0.625rem
--sf-b1 0.6875rem
--sf-b2 0.75rem
--sf-b3 0.8125rem
--sf-b4 0.875rem
--sf-b5 0.9375rem
--sf-b6 1rem
--sf-b7 1.0625rem
--sf-b8 1.125rem
--sf-b9 1.1875rem
--sf-c0 1.25rem
--sf-c1 1.375rem
--sf-c2 1.5rem
--sf-c3 1.625rem
--sf-c4 1.75rem
--sf-c5 1.875rem
--sf-c6 2rem
--sf-c7 2.125rem
--sf-c8 2.25rem
--sf-c9 2.375rem
--sf-d0 2.5rem
--sf-d1 2.75rem
--sf-d2 3rem
--sf-d3 3.25rem
--sf-d4 3.5rem
--sf-d5 3.75rem
--sf-d6 4rem
--sf-d7 4.25rem
--sf-d8 4.5rem
--sf-d9 4.75rem
--sf-e0 5rem
--sf-e1 5.5rem
--sf-e2 6rem
--sf-e3 6.5rem
--sf-e4 7rem
--sf-e5 7.5rem
--sf-e6 8rem
--sf-e7 8.5rem
--sf-e8 9rem
--sf-e9 9.5rem
--sf-f0 10rem
--sf-f1 11rem
--sf-f2 12rem
--sf-f3 13rem
--sf-f4 14rem
--sf-f5 15rem
--sf-f6 16rem
--sf-f7 17rem
--sf-f8 18rem
--sf-f9 19rem
--sf-g0 20rem
--sf-g1 22rem
--sf-g2 24rem
--sf-g3 26rem
--sf-g4 28rem
--sf-g5 30rem
--sf-g6 32rem
--sf-g7 34rem
--sf-g8 36rem
--sf-g9 38rem
--sf-h0 40rem
--sf-h1 44rem
--sf-h2 48rem
--sf-h3 52rem
--sf-h4 56rem
--sf-h5 60rem
--sf-h6 64rem
--sf-h7 68rem
--sf-h8 72rem
--sf-h9 76rem
--sf-i0 80rem
--sf-i1 88rem
--sf-i2 96rem
--sf-i3 104rem
--sf-i4 112rem
--sf-i5 120rem
--sf-i6 128rem
--sf-i7 136rem
--sf-i8 144rem
--sf-i9 152rem

Применение

Как выбрать значение

  • Точная высота элемента интерфейса — полосы, иконки, превью — класс шкалы размеров, например h-d6. Значения шагов — на странице Шкала размеров.
  • Высота внутри блока с заданной высотой — доли h-1/2 … h-5/6 или h-full.
  • Высота по содержимому — h-auto, значение по умолчанию. h-fit, h-min и h-max нужны там, где высота иначе растягивается: во флекс- и грид-раскладке.
  • h-min и h-max — основные имена; h-content-min и h-content-max дают те же значения.
HTML
<div class="h-f0">
  <div class="h-1/2">Половина высоты родителя</div>
</div>

Высота окна

h-screen равна высоте окна просмотра (100vh), h-screen-1/2 и другие доли — части этой высоты. На мобильных браузерах высота окна меняется, когда появляется и скрывается адресная строка. h-screen-small, h-screen-large и h-screen-dynamic берут малую, большую и текущую высоту окна (svh, lvh, dvh) из переменных темы; в браузере без поддержки этих единиц значение — высота окна.

HTML
<section class="h-screen-dynamic">Первый экран</section>

Если содержимое может оказаться выше окна, задайте не высоту, а минимальную высоту — min-h-screen.

Высота по ширине экрана

HTML
<div class="h-d6 md:h-e6">Баннер</div>

Ограничения

  • Доля родителя (h-1/2, h-full) не действует, если высота родителя не задана: тогда элемент получает высоту по содержимому.
  • Высота включает внутренние отступы и рамку: Framework задаёт всем элементам box-sizing: border-box.
  • Содержимое выше заданной высоты выходит за элемент. Чтобы его прокручивать или обрезать, добавьте класс переполнения.
  • У семейства нет префиксов состояния и отрицательных значений.

См. также

Settings

Тема
Font size
Page width