根本原因是父元素高度未“落地”，即未被浏览器计算出确定值；height: 100% 依赖父级有明确高度（非 auto），需逐级确保 html、body 及中间容器均设可计算高度，或改用 flex 布局的 stretch 行为。
子元素设 height: 100% 不生效，根本原因不是写错了样式，而是父元素高度没“落地”——它没被浏览器计算出一个确定值。
父元素高度必须可计算
CSS 中 height: 100% 是相对计算，依赖父级有明确高度值（px、rem、vh 等），而不是靠内容撑开的 auto 高度。
- 如果父元素只写了
min-height: 300px，那height: 100%仍无效——min-height不提供“基准高度” -
html和body默认高度是auto，所以即使最外层容器写了height: 100%，也会断在body - 解决办法：给
html和body显式设height: 100%，再逐级确保父链上每个容器都有可计算高度
Flex 布局下子元素自动等高
不需要写 height: 100%，Flex 容器天然支持子项拉伸对齐。
- 父容器加
display: flex，子元素默认align-items: stretch，就会填满父容器交叉轴高度 - 若子元素内有
margin或padding导致视觉错位，统一加box-sizing: border-box - 避免给子元素设
height或min-height，否则会覆盖 stretch 行为 - 注意：父容器本身得有高度（比如
height: 500px或flex: 1在弹性上下文中）
绝对定位 + height: 100% 的适用场景
当子元素需要脱离文档流、宽度/位置需突破父容器限制时，用 position: absolute 是可行解，但有隐含前提。
- 父元素必须设
position: relative（或非static）作为定位上下文 - 子元素设
top: 0; bottom: 0; width: 100%;比单纯height: 100%更可靠（避免父元素 padding 影响） - 若父容器有
padding，height: 100%只算 content box，而top/bottom会包含 padding 区域 - 不推荐用于多列等高布局——语义和维护性差，优先选 Flex 或 Grid
JavaScript 动态同步高度仅作兜底
纯 CSS 控制不了的场景（如父高度由 JS 动态计算、跨 iframe、或需要比例缩放），才用 JS 绑定。
- 监听父元素
resize或内容变化（MutationObserver），再手动设置子元素style.height - 慎用
offsetHeight：它触发重排，高频调用会卡顿；可节流或只在必要时更新 - 避免循环依赖：不要让子元素高度反过来影响父元素高度（比如通过
scrollHeight再赋给父级） - 响应式场景下，记得在
resize事件里重新计算，否则横竖屏切换后失效
真正容易被忽略的是：高度继承链里任意一环为 auto，100% 就断掉；而 Flex 的 stretch 行为又依赖父容器有明确尺寸——这两点不厘清，调半天也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
