为什么 height: 100% 会无效？
对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值。
原因是如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为 auto，因为解释成了 auto，所以无法参与计算。
使用绝对定位的元素会有计算值，即使祖先元素的 height 计算为 auto 也是如此。
补充：解决
height: 100%无效的常见办法：
- 给祖先元素显式设置
height（如html, body { height: 100%; }）。- 使用
position: absolute让元素脱离普通流，此时百分比基于包含块的高度计算。- 用 flex/grid 布局：父级
display: flex时，子项flex: 1即可占满剩余空间，无需关心百分比。- 用
vh单位（height: 100vh）相对视口高度，不依赖父级高度。
