min-height 失效主因是高度上下文断裂：父容器无明确高度、子元素脱离文档流、align-items 被覆盖或相对单位解析为0，需逐级检查高度链与布局行为。
写了 min-height 还塌陷，大概率不是属性写错了，而是它根本没被浏览器“当作高度基准”来用——min-height 需要可计算的上下文，而这个上下文在很多常见布局中是断掉的。
父容器没高度参考，min-height 就是空锚点
比如父级是 display: flex 但没设 height 或 min-height，子元素的 min-height: 200px 就会被忽略；又或者父级是 position: absolute 却没配 top/bottom，IE10 和 Safari 都会直接跳过 min-height 计算。
- 用 DevTools 查父容器的
computed height：如果是0px或auto，说明它自己都没高度，子项的min-height自然无从生效 - 移动端尤其常见：
html和body没设height: 100%，整条链就断了 - Flex/Grid 容器自身必须有明确高度来源（如
min-height: 100dvh），否则子项的min-height不参与拉伸逻辑
align-items: stretch 被覆盖，子项根本不会拉伸
Flex 或 Grid 子项默认靠 align-items: stretch 在交叉轴上填满高度，但这个行为极易被干扰。一旦子元素写了 height、max-height、align-self: flex-start，或父容器显式设了 align-items: flex-start，min-height 就失去作用对象。
- 检查子元素是否带
height: 100%—— 它和min-height冲突，且在无祖先高度时退化为0px - Flex 布局中，给关键子项加
min-height: 0（尤其是flex: 1的那个），否则 Safari 会冻结其高度估算 - Grid 中避免对子项用
height: 100%，改用min-height: 100%+ 显式align-items: stretch
子元素脱离文档流，父容器“看不见”它
浮动（float）、绝对定位（position: absolute）、display: inline-block（IE10 下对 min-height 支持异常）都会让子元素不参与父容器高度计算。此时哪怕父级写了 min-height，也只是兜底视觉高度，无法修复结构塌陷本身。
立即学习“前端免费学习笔记（深入）”；
-
position: absolute子项：它的height: 100%算的是包含块高度，不是父容器 DOM 高度；若包含块是position: static，就 fallback 到视口 -
float子项：父容器需触发 BFC（如overflow: hidden或display: flow-root）才能把浮动元素纳入高度计算 - IE10 中
display: inline-block父容器 +min-height几乎无效，应改用display: block或inline-table
单位或兼容性陷阱让值实际为 0
rem、vh、% 这些相对单位在特定条件下会解析为 0，导致 min-height 形同虚设。
- 用了
rem但html { font-size }没设：IE10 直接当0rem处理 -
min-height: 100vh在 iOS Safari 地址栏收起/展开时跳变，甚至初始渲染为0；优先用100dvh（Safari 16.4+），回退到-webkit-fill-available -
min-height: 100%必须确保所有祖先（包括html、body）都有明确高度，缺一不可
真正要盯住的，从来不是 min-height 写没写，而是它所依赖的高度链有没有断、子元素是否还在文档流里、浏览器是否真的把它当成了一个可测量的锚点。这些地方一漏，再写十遍 min-height 也没用。
