Tailwind CSS - max-height
Tailwind CSS max-height 最大高度是一个实用类，它提供了一种有效处理内容最大高度的方法。它用于设置或修改任何 HTML 元素的最大高度。
Tailwind CSS max-height 类
以下是 Tailwind CSS max-height 最大高度 类的列表，这些类提供了一种有效处理内容最大高度的方法。
| 类 | CSS 属性 |
|---|---|
| max-h-0 | max-height: 0px; |
| max-h-px | max-height: 1px; |
| max-h-0.5 | max-height: 0.125rem; /* 2px */ |
| max-h-1 | max-height: 0.25rem; /* 4px */ |
| max-h-1.5 | max-height: 0.375rem; /* 6px */ |
| max-h-2 | max-height: 0.5rem; /* 8px */ |
| max-h-2.5 | max-height: 0.625rem; /* 10px */ |
| max-h-3 | max-height: 0.75rem; /* 12px */ |
| max-h-3.5 | max-height: 0.875rem; /* 14px */ |
| max-h-4 | max-height: 1rem; /* 16px */ |
| max-h-5 | max-height: 1.25rem; /* 20px */ |
| max-h-6 | max-height: 1.5rem; /* 24px */ |
| max-h-7 | max-height: 1.75rem; /* 28px */ |
| max-h-8 | max-height: 2rem; /* 32px */ |
| max-h-9 | max-height: 2.25rem; /* 36px */ |
| max-h-10 | max-height: 2.5rem; /* 40px */ |
| max-h-11 | max-height: 2.75rem; /* 44px */ |
| max-h-12 | max-height: 3rem; /* 48px */ |
| max-h-14 | max-height: 3.5rem; /* 56px */ |
| max-h-16 | max-height: 4rem; /* 64px */ |
| max-h-20 | max-height: 5rem; /* 80px */ |
| max-h-24 | max-height: 6rem; /* 96px */ |
| max-h-28 | max-height: 7rem; /* 112px */ |
| max-h-32 | max-height: 8rem; /* 128px */ |
| max-h-36 | max-height: 9rem; /* 144px */ |
| max-h-40 | max-height: 10rem; /* 160px */ |
| max-h-44 | max-height: 11rem; /* 176px */ |
| max-h-48 | max-height: 12rem; /* 192px */ |
| max-h-52 | max-height: 13rem; /* 208px */ |
| max-h-56 | max-height: 14rem; /* 224px */ |
| max-h-60 | max-height: 15rem; /* 240px */ |
| max-h-64 | max-height: 16rem; /* 256px */ |
| max-h-72 | max-height: 18rem; /* 288px */ |
| max-h-80 | max-height: 20rem; /* 320px */ |
| max-h-96 | max-height: 24rem; /* 384px */ |
| max-h-none | max-height: none; |
| max-h-full | max-height: 100%; |
| max-h-screen | max-height: 100vh; |
| max-h-svh | max-height: 100svh; |
| max-h-lvh | max-height: 100lvh; |
| max-h-dvh | max-height: 100dvh; |
| max-h-min | max-height: min-content; |
| max-h-max | max-height: max-content; |
| max-h-fit | max-height: fit-content; |
Tailwind CSS 最小高度类的功能
- max-h-* 此类用于设置任何元素的特定最大高度，* 代表一个数字，可以是上表中任何可接受的值。
- max-h-px 此类将元素的最大高度设置为 1px。
- max-h-auto 此类根据内容定义元素的最大高度。
- max-h-1/2 指定最大高度设置为窗口的一半。
- max-h-1/3 指定最大高度设置为窗口的三分之一。
- max-h-1/4 指定最大高度设置为窗口的四分之一窗口。
- max-h-1/5: 指定最大高度设置为窗口的五分之一。
- max-h-1/6: 指定最大高度设置为窗口的六分之一。
- max-h-full: 此类设置最大高度为其最大潜力。
- max-h-screen: 指定最大高度设置为屏幕大小。
- max-h-svh: 此类设置元素的最大高度为 100svw。
- max-h-lvh: 此类设置元素的最大高度为 100lvh。
- max-h-dvh: 此类设置元素的最大高度100dvh
- max-h-min 此类用于指定最小容量时的最大高度。
- max-h-max 此类用于指定最大容量时的最大高度。
- max-h-fit 此类设置最大高度，以使内容适合父级元素。
Tailwind CSS 最大高度类示例
以下示例将说明 Tailwind CSS 最大高度类的实用功能。
设置最大高度
我们已经多次使用了 CSS 的 maximum-height 属性，因为在这里我们也可以使用上述类来实现。
示例
在此示例中，我们将创建三个元素，并使用上述类设置不同的最大高度。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl mb-2">
Tailwind CSS Maximum Height Class
</h2>
<div class="flex">
<div class="h-64 bg-green-200 p-2
text-center w-fit ">
<div class="max-h-full w-60 p-1
bg-green-400 text-justify">
Here we set max-h-full class so the
maximum height can be the 100%
of the screen. This class set the
height of the element based on content.
</div>
</div>
<div class="h-64 bg-green-200 p-2
text-center w-fit">
<div class="max-h-1 w-48 p-1
bg-green-400">
max-h-1
</div>
</div>
<div class="h-64 bg-green-200 p-2
text-center w-fit">
<div class="max-h-16 w-48 p-1
bg-green-400">
max-h-16
</div>
</div>
</body>
</html>
条件最大高度
我们可以根据悬停、聚焦或屏幕尺寸等条件更改最小高度值。要设置任何元素最大高度的条件，我们可以使用 `hover` 和 `focus` 类。
示例
在下面的示例中，我们将在鼠标悬停在元素上时更改最大高度值。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl mb-2">
Tailwind CSS Maximum Height Class
</h2>
<div class="flex">
<div class="h-64 bg-green-200 p-2
text-center w-fit ">
<div class="max-h-full hover:max-h-8 w-60 p-1
bg-green-400 text-justify">
Here we set max-h-full class so the
maximum height can be the 100%
of the screen. This class set the
height of the element based on content.
</div>
</div>
<div class="h-64 bg-green-200 p-2
text-center w-fit">
<div class="max-h-16 w-48 p-1
bg-green-400">
max-h-16
</div>
</div>
</body>
</html>
