h-full 不会让容器自适应内容高度，它仅使元素高度撑满已有明确高度的父容器；若父容器无显式高度（如 height: auto 或未设置），h-full 无效。
直接说结论： h-full 不会“让容器自适应内容高度”，它只让元素高度撑满其**已具有明确高度的父容器**；父容器若没高度，h-full 就失效——这是最常踩的坑。
为什么 h-full 看起来“没反应”？
因为 h-full 编译为 height: 100%，而 CSS 中 height: 100% 的生效前提是：父元素必须有**明确的高度值**（比如 height: 400px 或 height: 100vh），不能是 height: auto 或未设置高度。
常见错误现象：
– 给一个 div 加了 h-full，但父级只是普通块级容器，结果高度为 0
– 在 Flex 布局里给子项加 h-full，却忘了父级是否设了 min-h-0 或 h-full
- 检查父容器是否设置了
h-full、min-h-screen、h-[500px]等显式高度 - Flex 容器中，子项若需占满剩余高度，优先用
flex-1而非h-full - Grid 布局中，
h-full对 grid item 有效，但前提是 grid container 本身有高度
什么时候该用 h-full，而不是 min-h-full 或 flex-1？
h-full 适合「严格等高」场景，比如模态框内容区、固定高度卡片内的子区域；min-h-full 是防内容少时留白，flex-1 是弹性占位——三者语义和行为完全不同。
-
h-full：强制等高，内容超长会溢出（需配合overflow-y-auto） -
min-h-full：至少撑满父高，内容多时自动扩展，适合正文区域 -
flex-1：在 Flex 容器中分配剩余空间，不依赖父级显式高度，更健壮
示例：侧边栏 + 主内容布局中，主内容区应写 flex-1 overflow-y-auto，而非 h-full —— 否则窗口缩小时内容被截断。
与 viewport 高度混用时的兼容性注意点
用 h-full 配合 min-h-screen 是常见组合，但要注意：Safari 在 iOS 上对 100vh 的解析有偏差（地址栏收起/展开时高度跳变），min-h-screen 也会受此影响。
- 如果需要精确填满视口且支持 iOS，改用
min-h-[100dvh]（dvh是动态视口单位，Tailwind v3.3+ 支持） -
h-full和h-screen不可混用在同一路径：前者相对父高，后者相对视口，逻辑冲突 - 服务端渲染（如 Next.js）中，
h-screen可能导致首屏布局偏移，优先用min-h-screen或min-h-dvh
真正要实现“内容驱动的自适应高度”，别盯着 h-full；它不是 height:auto 的替代品，而是约束工具。父容器高度来源、布局上下文、滚动行为——这三点漏掉任何一个，h-full 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
