height: 100% 不生效的主因是父容器高度未明确设置，需逐级赋予确定高度或改用 Flex/Grid 布局；min-height: 100vh 更适配全屏且防移动端抖动。
子元素 height: 100% 不生效？父容器没设高度
这是最常卡住人的点：height: 100% 不是“占满可视区”，而是“占满父元素的计算高度”。如果父容器本身高度为 auto（比如默认块级元素），那 100% 就等于 0。
常见错误现象：div 套 div，内层写了 height: 100%，但完全没撑开；检查 computed height 确实是 0。
- 必须逐级确保父容器有明确高度值：可以是
px、vh，或由 Flex/Grid 触发的“内容无关高度” -
html和body默认也没高度，想让全屏布局生效，得加html, body {height: 100%;} - 百分比高度对
position: absolute子元素也有效，但依赖的是包含块（containing block）的高度，不一定是直接父级
Flex 布局下子项自动占满高度更可靠
Flex 是目前最稳的方案：只要父容器设 display: flex 且主轴为垂直方向，子项用 flex: 1 或 flex-grow: 1 就能填满剩余空间，完全不用算高度。
使用场景：卡片、侧边栏 + 主内容、表单区域分栏等需要动态拉伸的结构。
立即学习 “ 前端免费学习笔记（深入）”；
- 父容器需设
display: flex; flex-direction: column;（垂直排列） - 要撑满的子元素加
flex: 1；若还有其他兄弟元素，它会按剩余空间比例分配 - 注意：
flex: 1本质是flex-grow: 1; flex-shrink: 1; flex-basis: 0，flex-basis: 0才是关键——它让子项初始不占内容高度，纯靠 grow 拉伸 - 兼容性够用：Chrome 29+、Firefox 28+、Safari 9+、Edge 12+
min-height: 100vh 与 height: 100% 的区别在哪
min-height: 100vh 是让元素至少占满视口，内容多时可自然撑高；height: 100% 是强制固定为父容器当前高度，超了就溢出或滚动。
典型误用：用 height: 100vh 做全屏背景图容器，结果在 iOS Safari 上因地址栏缩放导致高度抖动。
-
min-height: 100vh更安全，尤其配合overflow-y: auto处理长内容 -
height: 100vh在移动端可能不准：Safari 的vh单位会随地址栏显示 / 隐藏重算，可用 JS 临时修正，但 Flex 通常更省事 - 不要混用：
min-height: 100vh+height: 100%会导致后者失效，因为min-height不影响百分比基准
Grid 布局中用 1fr 替代 height: 100%
Grid 适合明确分区的场景，比如顶部导航 + 主内容 + 底部，其中主内容要占满中间剩余空间。
错误做法：给主内容区写 height: 100%，再层层往上设高——绕远且脆弱。
- 父容器设
display: grid; grid-template-rows: auto 1fr auto;，中间行用1fr表示“剩余所有可用空间” -
1fr不依赖父容器是否设了height，只要父容器自身有高度（比如min-height: 100vh或 Flex 嵌套中被拉伸）就能工作 - 和 Flex 相比，Grid 更适合多维布局（行列同时控制），但单方向拉伸时 Flex 语义更直白
- 注意：IE11 支持 Grid 但不支持
fr单位，需用grid-row: 1 / -1配合height: 100%回退
真正麻烦的不是怎么写，而是搞清“谁的高度决定了谁的百分比”——DOM 层级、CSS 渲染流、定位上下文，三者叠在一起，一个没盯住，height: 100% 就静默失效。Flex 和 Grid 绕开了这个推理链，但得接受它们各自的约束条件。
