1. height: 100% 不生效的典型场景
根源分析
在父元素没有明确高度或高度未作为确定上下文来计算时，子元素若设置height: 100%往往不会按预期工作。这是因为百分比高度需要一个确定的高度上下文来计算，若父级高度为auto，子元素就无法得到同样的百分比高度。
同样地，若祖先元素中的任意一层高度为auto，也会导致高度计算失败。此时浏览器只能按内容高度来渲染，高度百分比失去参照。
/* 常见错误示例：父级高度未固定 */
.container { height: auto; }
.child { height: 100%; }
常见误区与差异
许多开发者误以为将子元素的高度设为100%就能填充父容器，但如果父容器的高度是由内容撑起来的（auto），子元素就无法获得有效的参照高度，最终显示仍然随内容变化。
需要注意的是，盒模型与 box-sizing也会影响可用高度的计算，特别是在处理padding和border时。
/* 盒模型对比示例 */
.box { padding: 20px; border: 1px solid #ccc; height: 100%; box-sizing: content-box; }
.box-border { padding: 20px; border: 1px solid #ccc; height: 100%; box-sizing: border-box; }
2. 实操：让高度控制可预期的几种做法
显式设置祖先高度的基本方案
要让height: 100%生效，第一步是确保最靠近的父元素有一个确定的高度范围。这通常可以通过设定根元素或容器的高度来实现，形成稳定的上下文。这也是CSS 高度控制的实操全解中最基础的做法。
在实际场景中，最直接的做法是把根元素及应用容器的高度设为100%，让子元素的百分比高度有明确参照。
/ 多数单页应用的入口
html, body, #app {height: 100%;
}
#app {height: 100%;
}
使用 min-height 代替 height 以适应内容
当你需要确保区域至少有某个高度，同时允许内容增高时，推荐使用min-height而非height，避免强制裁剪内容。
需要注意的是，min-height 在某些父容器高度受限的场景下需要与布局模型搭配使用，以确保子元素不会超出预期边界。
.panel {min-height: 50vh; /* 最小高度占视口高度的一半 */
}
3. Flex 布局中的高度控制要点
在 Flex 容器中高度的行为
在display: flex的容器中，子项的高度受到容器高度和垂直对齐的影响。若父容器高度固定，子项设为height: 100%通常可实现填充，但若容器高度随内容变化，效果会变得不稳定。
可通过设置align-items: stretch（默认）并让子项使用height: 100%，或让子项通过flex: 1 1 auto实现自适应拉伸来提升稳定性。
.container {display: flex;height: 100vh; /* 固定容器高度，便于子项填充 */align-items: stretch;
}
.sidebar, .content {height: 100%; /* 在扁平布局下填充父容器高度 */
}
结合滚动区域的高度管理
如果容器内部包含滚动区域，overflow与height: 100%的组合需要谨慎。将滚动区域单独成一个子容器，外部结构保持稳定，内部滚动独立处理。
.layout {display: flex;height: 100%;
}
.sidebar {width: 320px;
}
.main {flex: 1;min-height: 0; /* 让内部滚动区域有可滚动的高度参照 */overflow: auto;
}
4. Grid 布局中的高度控制
网格单元中的高度机制
在display: grid布局中，单元的高度由行高和网格区域约束决定。使用grid-template-rows设定明确的行高，可以让子元素的height: 100%实现稳定填充。
当需要随内容增长时，使用min-height与minmax组合，可以在不牺牲网格结构的情况下实现自适应。
.grid {display: grid;grid-template-columns: 300px 1fr;grid-template-rows: 1fr;
}
.panel {height: 100%;
}
自适应网格和固定行高的混合策略
对于复杂页面，通常需要混合自适应网格和固定高度的行。通过为特定网格单元设定min-height与height，可以在不同屏幕下保持一致的视觉结构。
.grid {grid-template-columns: 240px 1fr;grid-auto-rows: minmax(80px, auto);
}
.cell { height: 100%; }
5. 相对定位、绝对定位与高度的关系
定位上下文中的高度参照
当子元素使用position: absolute时，其高度通常以最近的定位父元素（非 static）为参照。若定位父元素没有明确高度，子元素的高度也会变得不可预测。
通过将父容器设为position: relative并给定一个明确高度，子元素的height: 100%就能正常工作。
.wrapper { position: relative; height: 400px; }
.box { position: absolute; height: 100%; top: 0; left: 0; right: 0; }
6. 实用调试与排错技巧
浏览器开发者工具中的关键检查点
在调试height: 100%时，优先核对父级高度是否明确、以及盒模型、边距与填充是否影响总高度。通过开发者工具的Computed与Layout视图，可以快速定位计算上下文。
调试步骤通常包括：先固定一个祖先高度，再逐层向下验证高度计算，若某一层变为auto 高度，就需要调整参照关系。
/* 简化的调试示例，逐步锁定祖先高度 */
html, body { height: 100%; }
#root { height: 100%; position: relative; }
