Tailwind CSS - 高度

Tailwind CSS：高度

Tailwind CSS 提供了一套全面的工具类（utility classes），用于控制元素的 height（高度）。这些工具类涵盖了固定尺寸、百分比以及视口相关单位，能够精确控制布局的垂直维度。

现代开发工作流

虽然你可以使用 Tailwind Play CDN 进行快速演示，但专业的开发工作流会涉及使用包管理器（package manager）和构建工具（build tool）来设置 Tailwind CSS。这允许进行自定义（customization）、性能优化，并且是生产级应用（production applications）的标配。

# Tailwind CSS 的标准项目设置
npm install -D tailwindcss
npx tailwindcss init
# 然后配置 tailwind.config.js 和你的 CSS 入口文件。

常用高度类

以下是 Tailwind 最常用高度工具类（height utility classes）的精选列表。

类名	CSS 属性
h-0 到 h-96	height: 0px; 到 height: 24rem; /* 384px */
h-auto	height: auto;
h-px	height: 1px;
h-1/2、h-1/3 等	height: 50%;、height: 33.33...%; 等
h-full	height: 100%;
h-screen	height: 100vh;
h-svh、h-lvh、h-dvh	height: 100svh;、height: 100lvh;、height: 100dvh;
h-min	height: min-content;
h-max	height: max-content;
h-fit	height: fit-content;

核心概念解析

• 固定高度 (h-*)：使用 h-16 (4rem 或 64px) 等类来设定元素预设的固定高度。
• 百分比高度 (h-1/2, h-full)：这些类将高度设置为相对于其父元素。要使 h-full 生效，父元素必须具有明确定义的高度。
• 视口高度 (h-screen)：将高度设置为相对于视口（viewport）。h-screen 使元素与可见屏幕一样高，非常适合用于英雄区（hero sections）或全屏布局。
• 动态视口高度 (h-svh, h-lvh, h-dvh)：这些是现代单位，用于解决移动浏览器上因地址栏等 UI 元素出现或消失而导致的布局问题。h-svh（small）是不包含这些 UI 的视口高度，h-lvh（large）包含它们，而 h-dvh（dynamic）则实时调整。
• 基于内容的高度 (h-min, h-max, h-fit)：这些类根据元素内容调整大小，适用于创建灵活的组件。

实用示例

示例 1：固定高度和全高

此示例展示了固定高度与使用 h-full 之间的区别，后者会扩展以填充其父容器。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed vs Full Height</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-gray-50">
  <h1 class="text-xl font-bold mb-4">Fixed vs. Full Height</h1>
  <!-- The parent container with a defined height -->
  <div class="h-64 bg-slate-200 p-4 flex justify-around items-center rounded-lg">
    <!-- Fixed height child -->
    <div class="h-32 w-32 bg-blue-500 text-white flex items-center justify-center rounded-md shadow">
      h-32
    </div>
    <!-- Full height child (takes 100% of parent's height) -->
    <div class="h-full w-32 bg-green-500 text-white flex items-center justify-center rounded-md shadow">
      h-full
    </div>
  </div>
</body>
</html>

示例 2：屏幕高度和任意值

这里，我们创建了一个使用 h-screen 填充整个屏幕的英雄区（hero section）。我们还为需要特定、非标准高度的部分使用了任意值 (h-[500px])。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Screen & Arbitrary Height</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white">
  <!-- Full-screen hero section -->
  <header class="h-screen bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
    <h1 class="text-5xl font-extrabold text-white">Welcome!</h1>
  </header>

  <!-- Section with a specific, arbitrary height -->
  <section class="h-[500px] bg-white p-8">
    <h2 class="text-3xl font-bold">Content Section</h2>
    <p class="mt-4 text-gray-700">This section has a height of exactly 500px, set with an arbitrary value.</p>
  </section>
</body>
</html>

常见陷阱与调试技巧

• h-full 未生效？：这是最常见的问题。使用了 h-full 的元素需要一个定义了高度的父元素（例如，h-64、h-screen 或固定的像素高度）。如果父元素的高度是 auto，子元素的 height: 100% 将不会有任何效果。请检查所有父元素的链条。
• 响应式高度：请记住使用响应式前缀，如 md:h-screen，以便仅在特定断点应用高度。例如，一个组件在移动设备上可能是全高，但在桌面设备上具有固定高度。
• 使用 DevTools 检查：当高度工具类未按预期工作时，请使用浏览器的开发者工具（DevTools）检查元素。检查计算出的 height 值并查看其父元素的尺寸。