CSS 中 height: 100% 不生效的几种常见原因及排查思路
在写后台管理系统或者移动端页面时,经常遇到给子元素设置 height: 100% 却看不到任何高度的现象。打开控制台检查,元素本身没有内容,父级也没有显式高度,于是百分比高度就计算成了 0。这个问题在 Vue、React 项目里同样存在,跟框架无关,完全是 CSS 规范决定的。百分比高度依赖父级的高度,而父级高度又依赖它的父级,最终如果没有任何一层给出确定高度或拉伸,链条就断了。这篇文章从百分比高度的计算规则出发,结合 flex、grid、定位和绝对定位等不同布局场景,整理出实际开发中最容易踩到的几种情况和对应的排查方法,顺带给出几个不用层层写死高度的替代写法。