h-full 不等于“自适应内容高度”，因其编译为 height: 100%，仅当父容器有显式高度（如 h-screen、h-96）时生效；若父级为 height: auto，则 h-full 失效，元素高度塌陷或仅由内容撑开。
为什么 h-full 不等于“自适应内容高度”
h-full 编译为 height: 100%，而 CSS 中这个值只在父容器有**显式高度**（如 h-screen、min-h-[500px]、h-96）时才生效。父容器若为 height: auto（默认块级行为），h-full 就完全失效——元素高度塌陷为 0 或仅由内容撑开。
常见错误现象：
- 给
<main>加了h-full，但外层<div>没设高度，结果主区域看不见 - 在 Flex 布局里对子项用
h-full，却忘了父级是否加了min-h-0或h-full - 服务端渲染（如 Next.js）中，
h-screen可能导致首屏布局跳动，尤其在 Safari iOS 上
真正让容器“撑满视口并自适应”的组合写法
要实现稳定、跨设备可用的全高布局，必须明确高度来源 + 控制子项行为。推荐结构如下：
<div class="min-h-screen flex flex-col"> <header class="h-16"></header> <main class="flex-1 overflow-y-auto"></main> <footer class="h-12"></footer> </div>
关键点：
立即学习“前端免费学习笔记（深入）”；
-
min-h-screen提供最小高度保障，避免内容少时页面过短；它比h-screen更安全，尤其在 SSR 场景 -
flex flex-col启用垂直弹性流，使flex-1能正确分配剩余空间 -
flex-1用于需滚动的主区域——它不依赖父级显式高度，只按 Flex 规则占位，比h-full更健壮 - iOS Safari 对
100vh解析不稳定（地址栏收起/展开时高度跳变），应改用min-h-[100dvh]（Tailwind v3.3+ 支持）
侧边栏 + 主内容这类两栏自适应高度怎么写
当左侧固定宽、右侧需自适应高度并可滚动时，不能只靠 h-full。必须满足三个条件：
- 父容器设
h-screen或min-h-screen（提供高度上下文） - 左侧用
flex-[0_0_240px]锁死宽度（flex-none在嵌套 Flex 中不可靠） - 右侧加
flex-1 min-w-0：前者占剩余空间，后者防止长文本或 URL 导致横向溢出
示例：
<div class="h-screen flex"> <aside class="flex-[0_0_240px] bg-gray-100"></aside> <main class="flex-1 min-w-0 overflow-y-auto"></main> </div>
漏掉 min-w-0 会导致小屏下右侧内容撑开整个容器，出现意外横向滚动条。
aspect-ratio 类为何失效？先查父容器宽度
aspect-video 或 aspect-[16/9] 必须依赖父容器有**可测量宽度**才能推导高度。宽度为 0，比例就无从计算。
容易被忽略的宽度来源：
- 直接写
<div class="aspect-video">→ 失效（没宽度） - 正确写法：
<div class="w-full aspect-video">或<div class="max-w-md aspect-square"> - 在 Grid/Flex 容器中，确保该元素本身有
col-span-2或flex-1等宽度分配逻辑 - Safari 15.3 及更早版本不支持斜杠写法
aspect-[16/9]，改用小数aspect-[1.777]
别在容器或子元素上同时写 h-48 或 h-full —— 它们会覆盖 aspect-ratio 的自动高度计算。
