h-full不会让元素自适应内容高度，它仅使元素高度撑满已有明确高度的父容器；父容器若未设height（如height: auto或未声明），h-full即失效。
h-full 不会让元素“自适应内容高度”，它只让元素高度撑满**已有明确高度的父容器**。父容器若没设 height（比如是 height: auto 或压根没写），h-full 就完全不生效——这是 90% 的人第一次用就卡住的地方。
为什么 h-full 看起来像没起作用
因为 h-full 编译为 height: 100%，而 CSS 中 height: 100% 的计算前提非常严格：父元素必须有**可计算的高度值**，不能是 auto、min-height 或未声明高度。
- 即使
html和body都写了h-full，只要中间某一级（比如<main></main>）没显式设高，链就断了 -
min-h-screen不等于h-screen：min-h-screen只保证最小高度，但height: 100%不认它 - Grid 或 Flex 容器自身若没设
height，子项写h-full也会算成100% × 0px = 0px
怎么快速验证并修复高度链断裂
打开浏览器开发者工具，逐级检查目标元素到 html 的每一层父元素，看它们的 computed height 是否为具体数值（如 500px、100vh），而不是 auto。
- 最稳妥的起点是给根容器加
h-screen或min-h-screen（后者更防内容溢出） - 如果要用百分比继承，必须每层都写：
html { height: 100%; } body { height: 100%; } .wrapper { height: 100%; } .target { h-full } - 对 Grid/Flex 容器，别依赖
grid-template-rows: 1fr来“自动赋高”——它只分配内部空间，不定义容器自身高度
替代方案：什么时候不该硬套 h-full
当目标只是让内容填满可用空间、或实现垂直居中/底部对齐时，h-full 往往不是最优解，反而容易引入高度链依赖。
- Flex 布局中，用
flex flex-col h-full+flex-1比在子项上写h-full更可靠 - Grid 布局中，直接用
grid grid-rows-[1fr_2fr]，子项不写h-full，靠align-self: stretch（默认行为）填满轨道 - 绝对定位元素需要撑高父容器时，父级必须加
relative+ 明确高度（h-64或h-screen），否则绝对子元素会脱离文档流且无法反向撑高
真正难的不是写对一个 h-full，而是意识到：CSS 百分比高度从来不是“自适应”，它是一条脆弱的、必须手动打通的高度计算链。漏掉任意一级显式高度声明，整条链就归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
