1. 尺寸调整
  2. 高度

尺寸调整

高度

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

样式
h-<数字>
height: calc(var(--spacing) * <数字>);
h-<分数>
height: calc(<分数> * 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-<数字> 工具类,例如 h-24h-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-fullh-<分数> 工具类,例如 h-1/2h-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 的展开或收缩而变化

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

tailwindcss.com

h-dvh

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

匹配大视口

使用 h-lvh 工具类将元素的高度设置为视口的最大可能高度

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

tailwindcss.com

h-lvh

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

匹配小视口

使用 h-svh 工具类将元素的高度设置为视口的最小可能高度

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

tailwindcss.com

h-svh

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

同时设置宽度和高度

使用 size-pxsize-4size-full 等工具类同时设置元素的宽度和高度

size-16
size-20
size-24
<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-[<值>] 语法 来设置高度基于完全自定义的值

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

对于 CSS 变量,您也可以使用 h-(<自定义属性>) 语法

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

这只是 h-[var(<自定义属性>)] 的简写,它会自动为您添加 var() 函数。

响应式设计

前缀一个 height 工具类 带有断点变体(如 md:)以仅在中等 屏幕尺寸及以上应用该工具类

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

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

自定义主题

h-<数字>size-<数字> h-<数字>size-<数字>工具类由 --spacing 主题变量驱动,该变量可以在您自己的主题中进行自定义

@theme {  --spacing: 1px; }

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

版权所有 © 2025 Tailwind Labs Inc.·商标政策