h-full失效的根本原因是父容器高度链断裂，因height:100%要求所有祖先元素均有明确高度（非auto），任一环节为auto则计算为0px；需逐级检查computed height并显式设置h-full或固定高度。
因为 h-full、h-1/2 这类百分比高度类名，依赖父容器有可计算的高度值；如果中间任意一级父元素是 height: auto（默认行为），整个链就断了，最终算出来是 0px。
为什么 h-full 看起来完全没反应
它编译为 height: 100%，而 CSS 中 height: 100% 的计算前提是：父元素必须有明确高度（比如 px、vh、rem），不能是 auto 或未声明。哪怕 html 和 body 都写了 h-full，只要中间某一层（例如 <main> 或某个 <div>）没设高，子元素的 h-full 就等于 100% × 0px = 0px。
- 打开浏览器开发者工具 → 逐级检查目标元素到
html的每一层父元素 → 看 computed height 是不是具体数值（如500px、100vh），而不是auto -
min-h-screen不等于h-screen：min-h-screen只保证最小高度，但height: 100%不认它 - Flex 或 Grid 容器自身若没设高，子项写
h-full同样算成0px
怎么快速补全高度链
最直接的办法是显式给每一级父容器设高，尤其是根路径上容易被忽略的节点。
- 确保
html和body有高度：html, body { height: 100%; }（或在 Tailwind 中用h-full） - Vue/React 项目中，
App.vue或根组件的最外层<div>必须加h-full - 如果用了
flex布局，父容器要同时写flex flex-col h-full，否则子项的h-full仍无效 - Grid 容器别指望靠
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），否则绝对子元素会脱离文档流且无法反向撑高
overflow: auto 不滚动？大概率是高度链断了
百分比高度失效时，overflow: auto 也跟着失效——因为容器实际高度是 0px，内容根本“溢出”不了。
- 优先用
max-height: 30vh替代height: 30%，vh直接基于视口，不依赖父级高度 - 删掉冲突的
height，只留max-height—— 它允许内容自然撑高，仅超限时触发滚动 - 避免写
overflow-y: scroll，它强制显示滚动条轨道，破坏 UI；overflow: auto才是正确选择
真正卡住人的从来不是类名写错，而是忘了高度是个「传递性依赖」：每层父容器都得明确表态“我有多高”，子元素才敢按比例分配。一旦漏掉一层，整条链就塌了。
