百分比高度不生效的根本原因是父容器高度为auto，导致无法计算相对值；需逐层检查祖先元素是否有显式高度（height/max-height/min-height或flex/grid撑开），推荐用flex:1替代height:%，并统一设置box-sizing:border-box。
百分比高度不生效？先确认父容器有没有显式高度
CSS 中 height: 50% 不起作用，绝大多数情况是因为父容器高度是 auto——浏览器无法从一个“没高度”的父级算出子元素的 50% 是多少。
常见错误现象：div 设了 height: 80%，但实际高度为 0 或只包裹内容；开发者反复检查子元素样式，却忽略父级甚至祖先链上某一层是 height: auto（默认值）。
- 必须逐层向上检查，直到找到第一个有明确高度的祖先（
height、max-height、min-height，或由flex/grid布局强制撑开） -
height: 100vh可作为根容器兜底方案，但要注意vh包含地址栏等不可控因素，移动端尤其不稳定 - 用
display: flex+flex-direction: column的父容器，子项设flex: 1比硬写百分比更可靠
Flex 布局下百分比高度失效？别混用 flex 和 %
当父容器是 display: flex，子元素设 height: 50% 很可能被忽略——因为 flex 子项的高度计算逻辑优先走 flex-basis / flex，而不是百分比。
使用场景：卡片列表、侧边栏+主内容布局中，希望右侧区域占满剩余高度。
- 直接删掉子元素的
height，改用flex: 1（等价于flex: 1 1 0），它会自动填满可用空间 - 如果必须保留百分比语义（比如响应式断点切换），用
min-height: 50%+flex: 1组合，避免被 flex 基线覆盖 - 注意
align-items: stretch（flex 默认值）本身就会让子项拉伸到容器高度，此时再设height: 100%是冗余且易冲突的
绝对定位元素的百分比高度为什么按 viewport 算？
对 position: absolute 元素设 height: 50%，其参考基准不是最近的定位父容器，而是包含块（containing block）——若父级没设 position: relative/absolute/fixed，就会一路往上找到 initial containing block（通常是 viewport）。
容易踩的坑：弹窗、下拉菜单内部高度写成 50%，结果在不同屏幕尺寸下错位或溢出。
- 确保绝对定位元素的**最近定位祖先**（即
position不为static的父级）设置了明确高度 - 或者改用
top/bottom配合height: auto实现“占满区间”，例如top: 20px; bottom: 20px; - 慎用
height: 100%在绝对定位子元素里——它依赖父级高度，而父级高度又常依赖它自身内容，容易形成循环依赖
box-sizing: border-box
百分比高度计算时，border 和 padding 默认会撑出容器之外——因为 height 只管 content box，而 border 和 padding 是额外加上的。
性能影响不大，但视觉错位明显：明明写了 height: 100%，结果内容被截断或滚动条意外出现。
- 统一加上
box-sizing: border-box，让height包含padding和border - 全局重置推荐写法：
* { box-sizing: border-box; }，现代项目基本都这么干 - 注意：IE8+ 支持
border-box，但老版本 Android WebView 有 bug，若需兼容可单独给关键容器加
百分比高度本质是相对计算，不是魔法。它脆弱的地方在于依赖链太长——父、祖父、文档流、定位上下文、盒模型规则，漏掉任意一环都会断掉。真正稳定的做法，往往是绕开百分比，用 flex / grid / 绝对定位区间替代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
