height

设置元素高度的实用工具。

快速参考

类名	样式
`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-lh`	`height: 1lh;`
`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）根据间距比例将元素设置为固定高度：

h-96

h-80

h-64

h-48

h-40

h-32

h-24

<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）为元素设置基于百分比的高度：

h-full

h-9/10

h-3/4

h-1/2

h-1/3

<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 的展开或收缩而变化：

TODO 存在问题，需要调试

滚动视口以查看视口高度的变化

<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 等实用工具同时设置元素的宽度和高度：

size-16

size-20

size-24

size-32

size-40

<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() 函数。

响应式设计

使用断点变体（例如 md:）作为 height 实用工具的前缀，以便仅在中等尺寸及以上的屏幕上应用该实用工具：

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

在变体文档中了解更多关于使用变体的信息。

自定义您的主题

h-<number> 和 size-<number> 实用工具由 --spacing 主题变量驱动，该变量可以在您自己的主题中进行自定义：

@theme {
  --spacing: 1px;
}

在主题变量文档中了解更多关于自定义间距比例的信息。

max-width

设置元素最大宽度的实用工具。

min-height

设置元素最小高度的实用工具。