Tailwind CSS - 最小高度

现代 Tailwind CSS：最小高度

min-h-* 实用工具设置元素的最小高度。这确保元素不会小于指定值，即使其内容较少。它对于创建健壮的布局至关重要，例如吸附在视口底部的页脚。

常用最小高度实用工具

Tailwind 开箱即用地提供了一套全面的最小高度实用工具。

类名	CSS 属性
min-h-0	min-height: 0px;
min-h-full	min-height: 100%;
min-h-screen	min-height: 100vh;
min-h-min	min-height: min-content;
min-h-max	min-height: max-content;
min-h-fit	min-height: fit-content;

Tailwind 还包括一个数值比例（例如 min-h-4、min-h-16、min-h-px），以及动态视口高度单位，如 min-h-svh（最小视口高度）、min-h-lvh（最大视口高度）和 min-h-dvh（动态视口高度），以处理移动浏览器 UI 元素。

实际用例：粘性页脚

一个经典的布局问题是，当内容较短时，页脚会悬挂在页面中间。通过将主内容包装器设置为 min-h-screen，我们强制它占据至少完整的视口高度，从而将页脚推到底部。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Sticky Footer Example</title>
</head>
<body class="bg-slate-100 text-slate-900">

  <!-- flex 容器至少占据整个屏幕高度 -->
  <div class="flex flex-col min-h-screen">

    <header class="bg-white shadow p-4">
      <h1 class="font-bold">My Website</h1>
    </header>

    <!-- 主内容区域会增长以填充可用空间 -->
    <main class="flex-grow p-8">
      <h2 class="text-2xl font-semibold">Page Content</h2>
      <p>This content is short, but the footer will still be at the bottom.</p>
    </main>

    <footer class="bg-slate-800 text-white p-4 text-center">
      Copyright &copy; 2024
    </footer>

  </div>

</body>
</html>

高级用法

条件式和响应式最小高度

你可以使用状态变体（如 hover:、focus:）和响应式断点（如 sm:、md:、lg:）有条件地应用最小高度实用工具。

<!-- 初始最小高度为 min-h-24，悬停时增长到 min-h-48 -->
<div class="min-h-24 hover:min-h-48 transition-all duration-300 ...">Hover me</div>

<!-- 在小屏幕上为 min-h-48，在中等屏幕及以上为 min-h-64 -->
<div class="min-h-48 md:min-h-64 ...">...</div>

使用任意值

如果内置值不够用，你可以直接在 HTML 中使用任意值。这是现代 Tailwind CSS 的一个强大特性。

<!-- 设置一个非常具体的最小高度 -->
<div class="min-h-[155px] bg-sky-200">...</div>

<!-- 使用 CSS 变量 -->
<div class="min-h-[var(--my-custom-height)] bg-teal-200">...</div>

<!-- 使用 calc() 进行动态计算 -->
<div class="min-h-[calc(100vh-4rem)] bg-indigo-200">...</div>

扩展你的配置

虽然任意值很好用，但如果你经常使用某个特定值，可以将其添加到 tailwind.config.js 文件中以便重复使用。例如，添加分数形式的最小高度：

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      minHeight: {
        '1/2': '50%',
        '1/3': '33.333333%',
        '2/3': '66.666667%',
        '1/4': '25%',
      }
    }
  },
  plugins: [],
}