尺寸
用于设置元素高度的实用工具。
| 类名 | 样式 |
|---|---|
h-<number> | height: calc(var(--spacing) * <number>); |
h-<fraction> | height: calc(<fraction> * 100%); |
h-auto | height: auto; |
h-px | height: 1px; |
h-full | height: 100%; |
h-screen | height: 100vh; |
h-dvh | height: 100dvh; |
h-dvw | height: 100dvw; |
h-lvh | height: 100lvh; |
h-lvw | height: 100lvw; |
h-svh | height: 100svh; |
h-svw | height: 100svw; |
h-min | height: min-content; |
h-max | height: max-content; |
h-fit | height: fit-content; |
h-(<custom-property>) | height: var(<custom-property>); |
h-[<value>] | height: <value>; |
size-<number> | width: calc(var(--spacing) * <number>); height: calc(var(--spacing) * <number>); |
size-<fraction> | width: calc(<fraction> * 100%); height: calc(<fraction> * 100%); |
size-auto | width: auto; height: auto; |
size-px | width: 1px; height: 1px; |
size-full | width: 100%; height: 100%; |
size-dvw | width: 100dvw; height: 100dvw; |
size-dvh | width: 100dvh; height: 100dvh; |
size-lvw | width: 100lvw; height: 100lvw; |
size-lvh | width: 100lvh; height: 100lvh; |
size-svw | width: 100svw; height: 100svw; |
size-svh | width: 100svh; height: 100svh; |
size-min | width: min-content; height: min-content; |
size-max | width: max-content; height: max-content; |
size-fit | width: fit-content; height: fit-content; |
size-(<custom-property>) | width: var(<custom-property>); height: var(<custom-property>); |
size-[<value>] | width: <value>; height: <value>; |
使用 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 实用工具使元素跨越整个视口高度，该高度会随着浏览器 UI 的展开或收缩而变化
滚动视口以查看视口高度变化
<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>] 语法 来设置高度基于完全自定义的值
<div class="h-[32rem] ..."> <!-- ... --></div>对于 CSS 变量，你也可以使用 h-(<custom-property>) 语法
<div class="h-(--my-height) ..."> <!-- ... --></div>这只是 h-[var(<custom-property>)] 的简写形式，它会自动为你添加 var() 函数。
前缀a height 实用工具 使用断点变体（如 md:）仅在中等 屏幕尺寸及以上
<div class="h-1/2 md:h-full ..."> <!-- ... --></div>在变体文档中了解更多关于使用变体的信息。
h-<number> 和 size-<number> h-<number> 和 size-<number>实用工具由 --spacing 主题变量驱动，可以在你自己的主题中自定义
@theme { --spacing: 1px; }在主题变量文档中了解更多关于自定义间距比例的信息。