height: 100% 不生效的根本原因是父元素高度为 auto，子元素无法基于未确定的高度计算百分比；需为父元素设置明确高度（如 400px 或 100vh）或通过 html→body→容器逐级设 height: 100%，并配合 box-sizing: border-box 避免 padding/border 溢出。
CSS中设置 height: 100% 不生效，根本原因在于：百分比高度依赖父元素的**明确高度值**，而多数父容器默认高度由内容撑开（即 height: auto），没有“可参考的高度”，子元素的 100% 就无从计算。
父元素高度未显式定义
百分比高度是相对于**包含块（containing block）的高度**计算的。如果父元素高度是 auto（浏览器默认），那它的高度取决于子内容，此时子元素设 height: 100% 相当于“我要等于一个还没确定的数”——浏览器无法解析，最终按 height: auto 处理。
- ✅ 正确做法：给父元素设置具体高度，如
height: 400px或height: 100vh - ✅ 或让父元素也继承高度链：从
html、body开始逐级设height: 100% - ❌ 错误示例：
div { height: 100%; }但其父没设高度 → 无效
盒模型影响：padding/margin/border 占用空间
即使父元素有明确高度，若子元素设置了 padding、border 或 margin，且未调整 box-sizing，实际渲染高度会超出 100%（因为默认 box-sizing: content-box，高度仅指内容区）。
- ✅ 推荐统一加：
*, *::before, *::after { box-sizing: border-box; } - ✅ 这样
height: 100%就包含 padding 和 border，更符合直觉 - ⚠️ 注意：margin 不受
box-sizing影响，仍会外推，需用其他方式（如 flex 布局）规避
常见布局场景下的解决方案
不同布局上下文，解决思路略有差异：
立即学习“前端免费学习笔记（深入）”；
-
全屏布局：直接用
height: 100vh（视口高度），不依赖父级 -
Flex 容器子项：父设
display: flex，子项设flex: 1或height: 100%（此时 flex 容器有隐式高度基准） -
Grid 容器子项：父设
display: grid，子项可设height: 100%或用grid-area占满区域 -
绝对定位元素：设
top: 0; bottom: 0;比height: 100%更可靠（自动拉伸）
检查与调试小技巧
快速定位问题：
- 在浏览器开发者工具中，选中该元素 → 查看“Computed”面板里的
height实际值，是否为auto - 临时给父元素加背景色或边框，确认它是否真的“有高度”
- 在父元素上加
height: 0; min-height: 100%;测试是否被内容撑开干扰 - 用
outline: 1px solid red代替border，避免影响盒模型计算
