min-height 不是显式高度，无法作为百分比 height 的基准；修复首选 Flex 布局，次选 Grid 或绝对定位，并注意 Safari 兼容性及 UI 库重置影响。
min-height 不是 height，浏览器直接忽略它来算百分比
子元素写 height: 100% 却没效果，不是你漏写了单位或拼错了，而是 CSS 规范明确要求：百分比高度必须基于一个「显式指定高度」的包含块。而 min-height 属于约束性尺寸（minimum constraint），不是「显式高度」——哪怕你设了 min-height: 600px 或 min-height: 100vh，父元素的 computed height 依然是 auto，子元素就无基准可依，height: 100% 自动退化为 auto。
常见失效场景和一眼识别法
打开开发者工具，选中父容器 → 切到「Computed」面板 → 看 height 值：
- 如果是
auto（哪怕旁边min-height显示 600px），链路就断了 - 如果是具体像素（如
720px）或100vh，说明高度上下文通了 - 特别注意：iOS Safari 地址栏收起时
100vh会重算，100dvh更稳（Chrome 105+/Safari 16.4+）
真正能用的三种修复方式（按优先级）
别硬套 height: 100%，换思路：
-
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%—— 完全绕过高度继承链
容易被忽略的兼容性细节
Safari 14–15.6 对 Flex 容器内 height: 100% 有特殊处理：即使父容器是 height: 100vh，子项也可能不拉伸。最稳妥做法是去掉 height: 100%，依赖 align-items: stretch（Flex 默认行为）让它自然填满。另外，某些 UI 库（如 Ant Design、MUI）会全局重置 min-height: 0，导致 Flex 子项无法拉伸，此时需手动加 min-height: auto 或 align-self: stretch。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
