Tailwind CSS - 最大高度

Tailwind CSS 中的 max-height 功能类允许您限制元素的最大高度。这对于创建健壮且响应式的布局至关重要，可以防止内容溢出并破坏您的设计，尤其是在处理动态内容时。

理解最大高度功能类

Tailwind 提供了一系列 max-h-{value} 类来应用 max-height CSS 属性。这些类映射到预定义的间距和尺寸刻度，但也可以与任意值一起使用，以实现完全的灵活性。

类名	CSS 属性
max-h-0	max-height: 0px;
max-h-px	max-height: 1px;
max-h-…	对应于 `theme.spacing` 刻度（例如，`max-h-4` -> `max-height: 1rem;`）
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;

核心概念

固定最大高度：使用 max-h-{number}（例如 max-h-64）根据 Tailwind 的默认间距刻度设置最大高度。
基于百分比的最大高度：使用 max-h-full 将元素的告诉限制为其父元素高度的 100%。这要求父元素具有定义的高度。
基于视口的最大高度：使用 max-h-screen 将高度限制为视口的高度。现代的 svh、lvh 和 dvh 单位在浏览器 UI 可能会出现和消失的移动设备上提供更精确的控制。
基于内容的最大高度：max-h-min、max-h-max 和 max-h-fit 提供了根据其固有内容尺寸调整元素大小的强大方法。
移除约束：使用 max-h-none 来移除任何先前应用的最大高度约束，这在响应式设计中特别有用。

实际示例

示例 1：创建可滚动的卡片主体

一个常见的用例是内容长度可能变化的卡片组件。通过在内容区域设置 max-h 并添加 overflow-y-auto，您可以确保卡片的总高度保持一致。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scrollable Card Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 flex items-center justify-center min-h-screen p-4">

  <div class="max-w-sm w-full rounded-lg bg-white shadow-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://via.placeholder.com/400x200" alt="Card Image">
    <div class="p-6">
      <h3 class="font-bold text-xl mb-2">Card Title</h3>
      <!-- 在这里，我们限制高度并在内容溢出时启用滚动 -->
      <div class="max-h-32 overflow-y-auto text-gray-700 text-base">
        <p>这是卡片内容的详细描述。当文本超过 `8rem`（32 * 0.25rem）的最大高度时，将出现垂直滚动条。此技术非常适合用户生成的内容、评论或产品描述，无论内容长度如何，都能保持一致的 UI 布局。</p>
        <p class="mt-4">此处可以添加更多内容，并且它仍将包含在可滚动区域内。</p>
      </div>
    </div>
  </div>

</body>
</html>

响应式和条件式最大高度

您可以通过在 max-height 功能类前加上响应式断点（如 md:max-h-96）或状态变体（如 hover:max-h-full）来有条件地应用它们。这对于创建动态和自适应界面非常强大。

示例 2：悬停时可展开的内容

在此示例中，一个截断的文本块在用户悬停时会展开到其完整高度。我们使用 max-h-16 作为初始状态，并使用 hover:max-h-screen 允许其完全展开。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Expandable Content Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">

  <div class="max-w-md w-full bg-white p-6 rounded-lg shadow-md">
    <h3 class="font-bold text-lg mb-4">Product Details</h3>
    <!-- transition-all 和 ease-in-out 类创建平滑动画 -->
    <div class="max-h-16 overflow-hidden hover:max-h-screen transition-all duration-500 ease-in-out">
      <p class="text-gray-600">
        这是一段详细的产品描述，最初为节省空间而被截断。通过应用 `max-h-16` 和 `overflow-hidden`，我们只显示前几行。当用户悬停在此容器上时，`hover:max-h-screen` 类会激活，展开容器以显示完整内容。`transition-all` 类确保此更改平滑发生。这是一种无需使用任何 JavaScript 即可实现“阅读更多”部分的绝佳 UX 模式。
      </p>
    </div>
  </div>

</body>
</html>

最佳实践与专家提示

任意值：如果默认刻度不符合您的需求，请使用方括号语法表示一次性值，例如 max-h-[150px] 或 max-h-[50vh]。
与溢出结合使用：max-h 几乎总是与溢出功能类（例如 overflow-y-auto 或 overflow-hidden）搭配使用，以控制超出最大高度的内容会发生什么。
自定义：为了项目范围的一致性，您可以在 tailwind.config.js 文件中扩展 maxHeight 刻度。
性能：动画 max-height 比动画 height 从 0 到 auto 性能更好。transition 功能类与条件 max-height 类搭配使用效果很好。