父级高度为auto时子元素height:100%无效，因浏览器无法计算百分比；需html和body均设height:100%并清空margin/padding，或改用vh、flex:1、top/bottom:0等替代方案。
因为父级容器高度为 auto，子元素的 height: 100% 或其他百分比值根本无法计算——浏览器会直接忽略它，不是“没生效”，而是“算不出结果”。
父元素 height: auto 是罪魁祸首
浏览器对宽度和高度的计算逻辑不对称：宽度默认参考视口或块级上下文，而高度在文档流中默认是 auto（即内容撑开）。只要父元素没显式设 height（比如 px、vh、flex 有效高度），它的计算值就是 auto。此时子元素写 height: 50% 相当于 auto × 0.5，结果是 NaN，CSS 引擎直接丢弃该声明。
常见错误现象：
- Toast 组件里一个分割线
<div class="divider">设了height: 100%，但始终显示为 0 高度 - Flex 容器内子项设
height: 100%，却完全不占满父容器 - 响应式布局中，
min-height: 100vh能用，但height: 100%死活不动
html 和 body 必须同时设高度才能穿透到底层
很多人只给 body 加 height: 100%，忘了 body 的父级是 html。如果 html 高度仍是 auto，那 body 的 100% 就无从参照。
立即学习“前端免费学习笔记（深入）”；
正确做法（缺一不可）：
-
html和body都要设height: 100% - 必须清除默认
margin和padding，否则会撑高导致滚动条或计算偏差 - 若需响应式适配，
height: 100vh比100%更可靠（但注意 iOS Safari 中vh在地址栏收起/展开时可能跳变）
示例：
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 100%; /* 现在能生效 */
}Flex / Grid 布局下百分比高度依然受限
即使用了 display: flex，父容器若没显式高度（比如只写了 flex-direction: column 但没设 height），子元素的 height: 100% 还是无效。Flex 本身不自动赋予父容器高度，它只是改变了子项排列方式。
更安全的替代方案：
- 用
flex: 1代替height: 100%（适用于 Flex 子项） - 用
min-height: 100vh+overflow: hidden控制视口填充 - 在绝对定位场景中，可用
top: 0; bottom: 0;替代高度百分比
注意：flex: 1 不等于 height: 100%——前者是分配剩余空间，后者是严格按父高比例缩放。
响应式中真正可靠的“100%高度”策略
纯百分比高度在响应式中本质脆弱，因为它依赖整条祖先链上每个容器都有可计算的高度。一旦某一层是 auto（比如文字内容动态增减），后续所有百分比就断了。
实际项目中建议：
- 优先用
vh单位（如height: 80vh）替代100%，尤其用于全屏卡片、弹层、侧边栏 - 用
aspect-ratio控制宽高比，比硬写height更适应响应式变化 - 对 Toast、Modal 等组件，直接用
max-height+overflow-y: auto，而不是强求填满父容器
最常被忽略的一点：你看到的“父容器没设高度”，往往不是代码里漏写了，而是某个中间祖先（比如 React 的 Fragment、未命名 div、CSS-in-JS 生成的 wrapper）悄悄把高度变成了 auto——查 DOM 树比查样式表更有效。
