min-h-full失效的根本原因是父容器高度链断裂，因min-height:100%依赖父容器有可计算高度，任一环节为auto则基准为0px；需逐级检查html至目标元素的computed height并显式设置h-full或固定高度。

min-h-full 为什么看起来没效果

因为 min-h-full 编译为 min-height: 100%，而 CSS 中这个值和 height: 100% 一样，**依赖父容器有可计算的高度**。如果父容器是 height: auto（默认行为），那么 100% 就等于 100% × 0px = 0px，min-h-full 自然就“撑不起来”——它只是设了个最小值，但这个最小值本身算出来是 0。

哪些父容器会让 min-h-full 失效

以下情况都会导致父容器高度不可计算，从而让 min-h-full 归零：

• html 和 body 没加 h-full 或 min-h-screen
• React/Vue 根组件外层 <div> 缺少 <code>h-full
• Flex 容器没设 h-full 或 min-h-0，仅靠 flex 不提供高度来源
• Grid 容器未显式设高（grid-template-rows 不定义容器自身高度）
• Fixed 定位元素的父级不是 fixed 或没配 top-0 bottom-0，导致脱离文档流后无高度上下文

min-h-full 和 h-full 的关键区别在哪

二者语义和行为完全不同：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• h-full：强制高度 = 父高，内容超长会溢出，需手动加 overflow-y-auto
• min-h-full：至少 = 父高，内容少时撑满，内容多时自动扩展，适合正文区
• 但它们都卡在同一关：父容器必须有明确高度（h-screen、h-[500px]、min-h-[100dvh] 等）

真正能绕过高度链的替代方案

当父容器高度来源不确定或不想层层加 h-full 时，优先考虑这些更健壮的写法：

• Flex 布局中用 flex-1 替代 min-h-full（不依赖父高，只争剩余空间）
• 滚动区域改用 max-h-[calc(100vh-64px)] + overflow-y-auto（避开百分比，直接算视口）
• 全高容器统一用 min-h-[100dvh]（比 min-h-screen 更稳，响应地址栏变化）
• Fixed 侧边栏必须配 top-0 bottom-0，不能只靠 min-h-full

最常被忽略的一点：你写的 min-h-full 很可能已经编译进 CSS 了，问题不在类名是否生效，而在它所依赖的整个高度链从根节点就开始断裂——检查 html → body → App → main 这条路径上每一层的 computed height，才是定位根源的最快方式。