尺寸設定
高度
用於設定元素高度的工具類別。
| 類別 | 樣式 |
|---|---|
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，根據間距比例將元素設定為固定高度。
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 的擴展或收縮而改變
滾動可視範圍以查看可視範圍高度的變化
<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>] 語法 來設定高度基於完全自定義的值
<div class="h-[32rem] ..."> <!-- ... --></div>對於 CSS 變數，您也可以使用 h-(<custom-property>) 語法
<div class="h-(--my-height) ..."> <!-- ... --></div>這只是 h-[var(<custom-property>)] 的簡寫，它會自動為您添加 var() 函數。
響應式設計
前綴一個 height 實用類別 與一個斷點變體，像是 md:，來僅在中等 螢幕尺寸及以上套用該實用類別
<div class="h-1/2 md:h-full ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的信息。
自定義您的主題
h-<number> 和 size-<number> h-<number> 和 size-<number>實用類別由 --spacing 主題變數驅動，可以在您自己的主題中自定義
@theme { --spacing: 1px; }在主題變數文件中了解更多關於自定義間距比例的信息。
