height: 100% 无效是因为父容器高度为 auto，无计算基准；需逐级设置 height: 100% 或改用 min-height: 100vh/100dvh，或通过 absolute、flex: 1、grid 1fr 等替代方案实现撑满。
父容器没设高度时 height: 100% 为什么无效
因为 常见场景：想让一个 绝对定位元素通过四边偏移可以强制撑满父容器，但前提是父容器得是「定位上下文」——即 当父容器是 立即学习“前端免费学习笔记（深入）”； Grid 天然适合“划分区域+自动填充”，比百分比或 height: 100% 是相对于**父元素的计算后高度**，而块级元素（如 height 或 min-height，其计算高度就是 auto，此时子元素的 100% 就没参照物，退化为 0。
填满整个视口，但只写 height: 100% 不起作用。
html 和 body 开始逐级设高：html, body {
height: 100%;
margin: 0;
}
.container {
height: 100%;
}min-height: 100vh，vh 单位不依赖父容器高度，直接基于视口100vh 的处理有 bug（地址栏收放时高度会错），必要时改用 100dvh（支持现代浏览器）
position: absolute 撑满的边界条件position 值不能是 static（默认值）。
position: relative、absolute 或 fixed
.full-cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Flex 布局下让子项撑满剩余空间
display: flex，且已有其他子元素时，单靠 flex: 1 就能让某子项占满剩余空间，比手动算高度更健壮。
flex-direction: column（垂直布局）或保持默认 row（水平）flex: 1;
—— 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0
flex: 1 1 auto 并配合 width: 100%；反之亦然height: 60px），flex: 1 才能正确分配剩余空间；否则所有子项都 flex: 1 会均分Grid 布局中用
1fr 实现自适应撑满vh 更可控，尤其适合多栏或头部/主体/底部结构。
实际项目里最常踩的坑不是写法不对，而是忘了检查父链上任意一层是否隐式成了 display: grid 和明确的轨道定义，例如：.layout {
display: grid;
grid-template-rows: 60px 1fr 40px;
height: 100vh;
}1fr 表示“剩余可用空间的一份”，多个 1fr 会等分；2fr 则占两份-ms-grid），如需兼容得降级处理height: auto，或者在移动端漏掉了 viewport meta 标签导致 vh 计算失准。
