CSS 里给 div 设置了 height:100%，为什么还是不生效？

CSS 里给 div 设置了 height:100% 还不生效，根源几乎都在包含块高度没被定下来，而不是样式没写对。2026 年做页面还原类项目，多数同类问题都能从“父级高度链”里找到答案；height:100% 并不是用来铺满视口，而是用来填充一个已经确定高度的父级。父级高度是 auto 时，浏览器会把 height:100% 按 auto 处理，看起来就像没生效。

height:100% 为什么不生效？先看包含块高度

百分比高度需要先拿到父级高度，再按比例折算。块级父元素默认高度由内容撑开，计算值通常是 auto，此时子元素的 100% 没有可参考的数值。就算父级写了 min-height:100vh，对子元素来说也不算明确高度，因为 min-height 只约束盒子最小高度，不能作为百分比高度的参考，height:100% 仍无效。

2026 年项目里常见错误设置主要集中在这三种：

• 父级只设了 min-height，子元素 height:100% 拿不到固定参考值。
• 在 flex 或 grid 容器里硬写 height:100%，子项可能已被默认 stretch 拉伸，再叠加 100% 反而出现溢出或截断。
• 元素绝对定位后，包含块变成最近的定位祖先，不是视觉上紧挨的父盒子。

判断方法很直接：从目标元素往上级看，每一层祖先的 height 都要有数值或可计算值，height:100% 才真正生效。但不是所有页面都要把父级链写到底，先用适用边界排除，能少改一堆无效样式。

先别改样式：这套方法适用什么，不适用什么

height:100% 适合父级高度明确、需要子元素跟随的场景，比如后台管理框架的内容区、固定高度的卡片区域、iframe 内嵌页面里的布局。这类页面只要把 html、body、外层容器逐层接好，height:100% 是可预期的。

但以下场景不建议硬用它：

• 父级高度由内容撑开，如折叠面板、评论列表、聊天记录；height:100% 没有参考，叠加 overflow 还容易出现双滚动条。
• 需要让整页背景铺满视口；应使用视口单位或 flex，而不是给子元素 height:100%。
• 在 flex/grid 里做“占满剩余空间”；应优先用 flex:1 + min-height:0，height:100% 容易和拉伸规则打架。

确定边界后，处理思路会清晰很多：父级高度如果是内容推出来的，height:100% 在这一层没有意义；要占可视区用视口单位，要占剩余空间用 flex，height:100% 留给父级本来就有固定高度的场景。

按视口、容器、自身三级链路查，定位比反复试样式快

定位时建议按三级链路查，避免在深层样式里反复试。浏览器要求高度链是通的，中间有任何一层是 auto，后面的百分比都会清零。

1. 视口：打开 DevTools 看 html 和 body 的计算高度，两者都设 100% 才能把视口高度传给内层；只设其中一个，链路可能断。
2. 容器：查目标元素的父级 computed height 是数值还是 auto。临时把父级写成 height:300px，子元素立刻变 300px，说明断点就在这里。
3. 自身：查目标元素是否被绝对定位、浮动或 flex 拉伸干扰；再看 box-sizing、margin 和 padding 是否让实际空间小于预期。

举个交付现场的例子：我曾接到一个活动页，内容不足一屏时 footer 没有贴底，外层模板又要求尽量不改结构（约束）。于是只给最外层容器补上高度链，把中间内容区改成 flex，并让内容区用 flex:1 吃掉剩余空间；桌面端一次通过。随后移动端地址栏收起时底部又露白，又用 100dvh 做兜底并回归，整体多花约 0.5~1 个工作日（结果与代价）。

按页面还原类项目的经验，html/body 没写全导致的问题，通常 5~10 分钟能定位；中间隔了多层 auto 的历史模板，经验区间是 10~30 分钟；需要整套高度链改造并做移动端回归的项目，常见要 0.5~1 个工作日。这个时间范围不是承诺，是用来评估返工范围的参考。

height:100%、100vh、100dvh、flex:1 怎么选：对比与经验区间

同样想“撑满”，不同场景应使用不同的方案。这里给出一组可核对对比，方便在方案评审或代码 Review 时快速判断。

• height:100%：适合父级高度已确定的内部区域，例如后台内容区。改动通常只有一两行，开发量常见 5~15 分钟；父级一旦变 auto，这段样式会在后续迭代中失效。
• min-height:100vh：适合内容不足一屏时让背景铺满视口。现代浏览器兼容性较稳，单页调整常见 10~30 分钟；移动端地址栏动态收起时可能露底，需要真机检查。
• min-height:100dvh：动态视口单位，更适合移动端全屏页面。生产建议先写 100vh 再覆盖 100dvh，并在常见浏览器上回归；真机验证和差异修复的回归成本，常见再增加 0.5 个工作日左右。
• flex:1 + min-height:0：适合侧边栏、聊天窗口等需要占满剩余空间的容器。需要给父级开启 flex，并提供明确高度或最小高度；子项加 min-height:0 可防溢出，维护性通常比逐层 height:100% 好。

这些开发量是参与页面还原项目时的经验区间，不是精确报价。重点结论是：min-height 不能给子元素百分比当参考；需要铺满视口用视口单位，需要占满剩余空间优先 flex，height:100% 真正适用的是“父级高度明确”的场景。

验收时，可以在父级临时写一个固定高度，子元素若立即跟随，说明链路是通的。如果内容超长后需要内部滚动，用 flex 子项加 min-height:0，代替层层嵌套的 height:100% 再加上 overflow，能少踩双滚动条的坑。

常见问题

height:100% 和 height:100vh 哪个更稳？

父级高度明确时用 height:100% 更稳，它能跟随父容器；100vh 直接取视口，主要用于整屏占位。移动端地址栏会动态收起，建议先写 100vh，再覆盖成 100dvh。

父元素没设高度时，子元素怎么占满剩余空间？

给父元素开启 flex，再让子元素 flex:1，并补 min-height:0。这样子元素占据剩余空间，比逐层写 height:100% 更稳；父级高度不固定时，height:100% 本来就没有可参考数值。

DevTools 显示 height:100% 还是 auto，先看哪里？

按视口、容器、自身三步查：先看 html/body 是否都有 100%，再看父级 computed height，最后看目标元素是否被定位或 flex 干扰。把父级临时写成一个固定高度，能快速判断断点在哪一层。

flex 容器里硬写 height:100% 为什么不生效？

flex 子项默认会被 stretch 拉伸，实际高度由 flex 算法决定，height:100% 不一定基于普通父级内容区再折算；应改用 flex 属性和 min-height:0 控制尺寸，而不是继续叠 height:100%。

综合看，height:100% 不是万能写法，适合包含块高度明确的场景。2026 年做页面时，先划清适用边界，再按视口、容器、自身三级链路去查，多数高度问题可以少走弯路。文中涉及的工作量是项目经验区间，实际需结合模板复杂度和移动端回归范围再估算。