height: 100%不生效是因为它依赖父元素的明确计算高度；若父元素无显式高度（如height、min-height）或高度由内容撑开，则100%等于0px，导致子元素塌缩。
为什么height: 100%经常不生效
因为height: 100%是相对于**父元素的计算后高度**，不是“填满可视区域”或“撑开父容器”。如果父元素没显式设高（比如height、min-height，或被内容撑出高度），那100%就等于0px——子盒子自然塌缩。
常见误判场景：父盒用了display: flex但没设高；父盒是position: absolute且未定义top/bottom；父盒本身高度由子内容撑开，但子又依赖父高——形成循环依赖。
必须确保父元素有明确高度
最直接的办法是给父盒加height或min-height。若想撑满视口，用100vh比100%更可靠；若需随内容自适应又让子填满，得换思路（见下一条）。
-
height: 100vh—— 适合全屏布局，但注意vh含滚动条高度，iOS Safari 有兼容问题 -
min-height: 100vh—— 更安全，允许内容超出时自然撑高 - 避免只写
height: 100%而父盒是display: block且无高度来源
用display: flex替代height: 100%
这是现代布局中更健壮的解法：父盒设display: flex + flex-direction: column（或row），子盒用flex: 1即可自动占满剩余空间，完全绕过高度继承问题。
立即学习“前端免费学习笔记（深入）”；
示例：
.parent {
display: flex;
flex-direction: column;
height: 400px; /* 此处必须有高度（可为vh、px、%等） */
}
.child {
flex: 1; /* 填满所有可用空间 */
}注意：flex: 1本质是flex: 1 1 0，其中flex-basis: 0让尺寸从零开始分配，避免内容干扰；若子盒有固有高度，可能需加min-height: 0防溢出。
盒模型影响：box-sizing和padding/margin
即使高度计算正确，padding、border或margin也可能让子盒溢出或错位。默认box-sizing: content-box会让height: 100%只管内容区，边框和内边距额外加高。
- 统一设
box-sizing: border-box（推荐全局重置） - 慎用
margin：块级子盒的上下margin会脱离父盒（外边距合并），导致高度计算失效 - 若用
position: absolute实现撑满，要配top: 0; bottom: 0; left: 0; right: 0，此时height属性会被忽略
真正卡住的往往不是height: 100%本身，而是父元素高度来源不明、盒模型未归一、或布局模式与预期错配。动手前先用浏览器开发者工具检查父元素的“Computed Height”是否非零——这是最快定位的起点。
