尺寸
max-height
用于设置元素最大高度的工具。
类 | 样式 |
---|---|
max-h-<number> | max-height: calc(var(--spacing) * <number>); |
max-h-<fraction> | max-height: calc(<fraction> * 100%); |
max-h-none | max-height: none; |
max-h-px | max-height: 1px; |
max-h-full | max-height: 100%; |
max-h-screen | max-height: 100vh; |
max-h-dvh | max-height: 100dvh; |
max-h-dvw | max-height: 100dvw; |
max-h-lvh | max-height: 100lvh; |
max-h-lvw | max-height: 100lvw; |
max-h-svh | max-height: 100svh; |
max-h-svw | max-height: 100svw; |
max-h-min | max-height: min-content; |
max-h-max | max-height: max-content; |
max-h-fit | max-height: fit-content; |
max-h-(<custom-property>) | max-height: var(<custom-property>); |
max-h-[<value>] | max-height: <value>; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 max-h-<number>
工具(如 max-h-24
和 max-h-64
)根据间距比例将元素设置为固定最大高度:
¥Use max-h-<number>
utilities like max-h-24
and max-h-64
to set an element to a fixed maximum height based on the spacing scale:
<div class="h-96 ..."><div class="h-full max-h-80 ...">max-h-80</div><div class="h-full max-h-64 ...">max-h-64</div><div class="h-full max-h-48 ...">max-h-48</div><div class="h-full max-h-40 ...">max-h-40</div><div class="h-full max-h-32 ...">max-h-32</div><div class="h-full max-h-24 ...">max-h-24</div></div>
使用百分比(Using a percentage)
¥Using a percentage
使用 max-h-full
或 max-h-<fraction>
工具(如 max-h-1/2
和 max-h-2/5
)为元素提供基于百分比的最大高度:
¥Use max-h-full
or max-h-<fraction>
utilities like max-h-1/2
and max-h-2/5
to give an element a percentage-based maximum height:
<div class="h-96 ..."><div class="h-full max-h-9/10 ...">max-h-9/10</div><div class="h-full max-h-3/4 ...">max-h-3/4</div><div class="h-full max-h-1/2 ...">max-h-1/2</div><div class="h-full max-h-1/4 ...">max-h-1/4</div><div class="h-full max-h-full ...">max-h-full</div></div>
使用自定义值(Using a custom value)
¥Using a custom value
使用 max-h-[<value>]
语法 根据完全自定义的值设置 maximum height:
<div class="max-h-[220px] ..."> <!-- ... --></div>
对于 CSS 变量,还可以使用 max-h-(<custom-property>)
语法:
<div class="max-h-(--my-max-height) ..."> <!-- ... --></div>
这只是简写,用于 max-h-[var(<custom-property>)]
它会自动为你添加 var()
函数。
响应式设计(Responsive design)
¥Responsive design
在 max-height
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<div class="h-48 max-h-full md:max-h-screen ..."> <!-- ... --></div>
请参阅 变体文档 详细了解如何使用变体。
自定义主题(Customizing your theme)
¥Customizing your theme
该 max-h-<number>
工具由 --spacing
主题变量驱动,可以在你自己的主题中进行自定义:
@theme { --spacing: 1px; }
在主题变量文档中了解有关自定义间距比例的更多信息。