根本原因是浏览器无法计算“100%”对应像素值，需html和body显式设height: 100%作为高度源头；父元素若为height: auto、position: absolute、inline类display或float等，均会导致height: 100%失效。

根本原因不是你写错了 CSS，而是浏览器压根算不出“100%”对应多少像素——它需要一个明确的、可继承的高度源头，而这个源头常常在 html 和 body 就断了。

为什么 height: 100% 在子元素上完全没反应

浏览器计算 height: 100% 时，只看**直接父元素的 computed height**。如果父元素是 height: auto（默认值），那子元素的 100% 就无从下手，退化为内容撑开高度——哪怕你写了十层嵌套，只要中间某一层没设高，后面全白搭。

• html 是 body 的父元素，body 是你所有容器的祖先；两者都必须显式设 height: 100%，缺一不可
• 某些 CSS reset 或框架（如 Normalize.css）会重置 html 或 body 的 height，导致你写了 body { height: 100% } 却依然失效
• 用开发者工具选中目标元素 → 切到 “Computed” 面板 → 查看 height 值：如果是 auto，说明包含块没生效；如果是具体像素（比如 720px），才说明链路通了

哪些父级 display 类型会让 height: 100% 失效

即使 html 和 body 都设了 height: 100%，若中间某层用了破坏“包含块”关系的样式，height: 100% 仍会回退到初始包含块（通常是视口），结果还是 auto。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• position: absolute 或 position: fixed 的父元素：它不再作为子元素的包含块，高度继承链中断
• display: inline、display: inline-block、display: table-cell：这些 display 类型对百分比高度的支持极差，height: 100% 基本被忽略
• float 元素：脱离文档流，无法提供有效高度上下文
• Flex 容器里子项写了 align-self: flex-start 或 min-height: 0：会干掉默认的 align-items: stretch 拉伸行为，此时再写 height: 100% 也无效

为什么 100vh 看似简单却更难控

100vh 绕过了百分比链路，直接拿视口高度当基准，所以写上去立刻见效。但它绑定的是“当前视口”，不是“父容器”，在真实场景里容易翻车：

• iOS Safari 地址栏收起/展开时，vh 值会重算，页面突然跳动
• 父容器设了 overflow: auto，子元素用 100vh 会溢出该容器，脱离滚动上下文
• 页面有 position: fixed 头部或底部时，100vh 仍按完整屏幕算，可能遮挡内容或留白
• 用户缩放页面（Ctrl + / Cmd +），vh 不随布局缩放，但百分比链路下的 height: 100% 更稳定

真正稳的替代方案：flex: 1 和 min-height: 0

现代布局中，flex: 1 比 height: 100% 更可靠：它不依赖父级已有高度，而是从 flex-basis: 0 开始拉伸，只认剩余空间。

• 父容器需设 display: flex 且有明确主轴方向（如 flex-direction: column）
• 要撑满的子元素加 flex: 1；若还有其他兄弟元素，它会按剩余空间比例分配
• 若子项内部嵌套非 Flex 元素，或被 UI 库加了 min-height: 0，需显式覆盖为 min-height: auto 或加 align-self: stretch
• Grid 容器中同理：不要在子项上硬写 height: 100%，改用 align-self: stretch（默认已有）或给容器本身设 height（如 height: 100vh 或 height: 500px）

真正卡住的往往不是怎么写 CSS，而是没打开开发者工具，逐层点开父元素看它们的「Computed height」到底是不是你预期的数值——这是最快定位问题的起点。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！