CSS 的 height: 100% 为什么不生效？百分比高度到底相对谁计算？

知识点详解：先找到那一份可以计算的“100%”

内容撑开的高度，不一定能作为百分比基准

假设外层没有指定高度，里面的内容把它撑到了 300px。开发者工具能测量出这个结果，不等于浏览器在计算孩子的 height: 100% 时，已经有一个独立确定的 300px 基准。

普通流中的外层高度可能反过来依赖孩子。如果孩子的高度又要求按外层计算，就形成了循环依赖。CSS 的尺寸规则会处理这种情况，常见结果就是百分比高度按 auto，而不是按事后测出来的高度再算一遍。

所以，看到“外层明明很高”，不能直接推出“孩子的 100% 就应该等于它”。

有明确基准时，百分比才容易理解

下面是一个普通块布局的最小例子：

.parent {
  height: 300px;
}

.child {
  height: 100%;
  box-sizing: border-box;
}

此时孩子可以基于外层明确的 300px 计算高度。使用 border-box，是为了把孩子自身的 padding 和 border 计入所设置的高度，减少“100% 加上边框又溢出”的问题。

把 parent 改成 height: 100% 后，又要继续检查 parent 自己的基准。百分比链条是否成立，不能只检查最近一层。

而 min-height 表达的是“至少这么高”。它不总等于给后代百分比高度提供一个确定的 height，不能把 min-height: 100vh 当作任何布局下的通用修复。

包含块为什么不一定是直接父元素？

包含块是 CSS 进行定位和尺寸计算的基准，不是一个固定等同于 DOM 父节点的称呼。

普通流中的块元素常以合适的祖先内容区域为基准。绝对定位元素则要根据定位祖先等规则寻找包含块，有些 transform 等属性也会影响建立包含块的条件。

因此排查绝对定位元素时，只给直接父节点加高度可能改错对象。应该先确认它究竟相对哪个区域定位，再检查该区域的尺寸。

这里演示的是包含块关系，示意图不按像素比例绘制。百分比高度还要结合具体定位与布局规则判断。

你要的是“百分比”，还是“剩余空间”？

假设页面由顶部导航和下方内容区组成。目标是让内容区占据导航之外的剩余高度，就不适合直接写 height: 100%，因为那可能把整页高度再加上导航高度。

更直接的做法是让布局分配剩余空间：

.page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
}

这里表达的是剩余空间分配，不是让 content 重新取一遍 page 的百分比高度。

如果要求内容区内部滚动，通常还需要给整个布局一个受限的高度，并检查滚动子项的 min-height: 0 等条件。不能仅加 overflow: auto，就认为任何内容都会被限制在屏幕里。

移动端还要区分 vh 与 dvh 的视口含义。dvh 可以跟随动态视口变化，也可能随浏览器界面变化产生尺寸调整，具体方案应按页面是否需要这种变化来选。

面试官继续追问

父元素写 height: 300px 就永远不会溢出吗？

不会。孩子的外边距、内容最小尺寸、边框盒计算等都可能带来溢出。高度基准成立，只解决百分比怎么算，不保证所有内容都装得下。

Flex、Grid 中也必须从 html 写满 100% 吗？

不一定。这两种布局具有自己的尺寸分配规则，某些条件下可以为后代提供确定尺寸。先看布局约束，再决定是否需要百分比链条。

排查时具体看哪些信息？

确认包含块是谁，检查祖先的 height、min-height、布局模式和定位方式，再看孩子的盒模型与溢出来源。不要只盯着 height: 100% 这一行。

面试速记卡

• height: 100%：按包含块的高度基准计算。
• 常见失效原因：普通流中的基准高度依赖内容，百分比按 auto 处理。
• min-height：最小高度约束，不是通用的百分比基准修复。
• 布局选择：占满视口用合适的视口单位，剩余空间用 Flex 或 Grid。
• 排查顺序：包含块、尺寸约束、布局规则、盒模型。