尺寸
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-(<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>; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 h-<number>
工具(如 h-24
和 h-64
)根据间距比例将元素设置为固定高度:
¥Use h-<number>
utilities like h-24
and h-64
to set an element to a fixed height based on the spacing scale:
<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>
使用百分比(Using a percentage)
¥Using a percentage
使用 h-full
或 h-<fraction>
工具(如 h-1/2
和 h-2/5
)为元素提供基于百分比的高度:
¥Use h-full
or h-<fraction>
utilities like h-1/2
and h-2/5
to give an element a percentage-based height:
<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>
匹配视口(Matching viewport)
¥Matching viewport
使用 h-screen
工具使元素元素跨越视口的整个高度:
¥Use the h-screen
utility to make an element span the entire height of the viewport:
<div class="h-screen"> <!-- ... --></div>
匹配动态视口(Matching dynamic viewport)
¥Matching dynamic viewport
使用 h-dvh
工具使元素跨越视口的整个高度,随着浏览器 UI 的扩展或收缩而变化:
¥Use the h-dvh
utility to make an element span the entire height of the viewport, which changes as the browser UI expands or contracts:
滚动视口以查看视口高度变化
<div class="h-dvh"><!-- ... --></div>
匹配大视口(Matching large viewport)
¥Matching large viewport
使用 h-lvh
工具将元素的高度设置为视口的最大可能高度:
¥Use the h-lvh
utility to set an element's height to the largest possible height of the viewport:
滚动视口以查看视口高度变化
<div class="h-lvh"><!-- ... --></div>
匹配小视口(Matching small viewport)
¥Matching small viewport
使用 h-svh
工具将元素的高度设置为视口的最小可能高度:
¥Use the h-svh
utility to set an element's height to the smallest possible height of the viewport:
滚动视口以查看视口高度变化
<div class="h-svh"><!-- ... --></div>
设置宽度和高度(Setting both width and height)
¥Setting both width and height
使用 size-px
、size-4
和 size-full
等工具同时设置元素的宽度和高度:
¥Use utilities like size-px
, size-4
, and size-full
to set both the width and height of an element at the same time:
<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>
使用自定义值(Using a custom value)
¥Using a custom value
使用 h-[<value>]
语法 根据完全自定义的值设置 height:
<div class="h-[32rem] ..."> <!-- ... --></div>
对于 CSS 变量,还可以使用 h-(<custom-property>)
语法:
<div class="h-(--my-height) ..."> <!-- ... --></div>
这只是简写,用于 h-[var(<custom-property>)]
它会自动为你添加 var()
函数。
响应式设计(Responsive design)
¥Responsive design
在 height
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<div class="h-1/2 md:h-full ..."> <!-- ... --></div>
请参阅 变体文档 详细了解如何使用变体。
自定义主题(Customizing your theme)
¥Customizing your theme
该 h-<number>
and size-<number>
工具由 --spacing
主题变量驱动,可以在你自己的主题中进行自定义:
@theme { --spacing: 1px; }
在主题变量文档中了解有关自定义间距比例的更多信息。