根本原因是min-height不属于“显式指定高度”，子元素height:100%需父元素height计算值不为auto；flex、grid或绝对定位是可靠解法。
子元素设 height: 100% 却不生效，根本原因不是写错了，而是父元素的 min-height 不等于「有明确高度」——浏览器直接无视它来计算百分比。
为什么 min-height 不能让子元素 height: 100% 生效
CSS 规范明确说：百分比高度（height、min-height）必须基于一个「显式指定高度」的包含块（containing block）。min-height 属于约束性尺寸，不是「显式高度」；只要父元素没设 height（哪怕只设 height: 0 或 height: 1px），子元素的 height: 100% 就会退化为 auto，最终高度由内容撑开或归零。
常见错误现象：
- 父元素
min-height: 600px，子元素height: 100%→ 实际高度为 0 或仅包裹内容 - 父元素用
min-height: 100vh，子元素仍无法铺满 - 多层嵌套中某一级只设
min-height，整条链路的百分比高度全部失效
三种真正可用的修复方式（按推荐顺序）
不用 hack、不依赖 JS，纯 CSS 可靠解法：
-
Flex 布局（最推荐）：给父元素加
display: flex，子元素自动拉伸。注意：若子元素本身有内容且高度超限，会撑开父容器；如需限制，加flex-shrink: 0或用overflow: hidden -
Grid 布局：父元素设
display: grid，子元素height: 100%立即生效。但注意grid容器默认不收缩，子元素仍可能撑高父级 -
绝对定位 + relative 父级：父元素加
position: relative，子元素加position: absolute; top: 0; bottom: 0; width: 100%。适合遮罩、全屏覆盖类场景，但脱离文档流，慎用于有兄弟元素的布局
height: 100% 能继承的前提到底是什么
不是「父元素有高度」，而是「父元素的 height 计算值不为 auto」。这意味着：
-
height: 100vh✅ 可继承 -
height: 500px✅ 可继承 -
height: 0✅ 可继承（哪怕视觉上不可见） -
min-height: 500px❌ 不可继承 -
height: 100%本身可继承，但前提是它的父级满足上述条件
所以，如果必须保留 min-height 语义（比如响应式最小高度），又想子元素撑满，不要试图在同级上硬凑，而是加一层 wrapper：外层设 height: 100% + display: flex，内层放 min-height 元素——把「高度来源」和「最小约束」拆到不同层级。
容易被忽略的兼容性与副作用
Flex 和 Grid 在现代浏览器中没问题，但 IE11 对 flex 的 min-height 支持有 bug，若需兼容，优先用绝对定位方案。
另外注意：
-
min-height和height: 100%同时存在时，最终高度取二者较大者，但子元素的100%仍只认父元素的height值 - 使用
position: absolute后，子元素不再参与父容器的高度计算，父容器可能塌陷（除非父容器另有高度来源） -
display: grid下，若子元素设了min-height，它可能突破父容器的min-height限制——因为 grid track 高度是独立计算的
真正卡住人的，从来不是“怎么写”，而是没意识到 min-height 本质上不提供「可继承的高度上下文」——它只管自己，不管后代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
