百分比高度为0是因为父容器height为auto导致无计算基准；需确保html、body及所有祖先元素均有显式高度（如100vh），或改用flex:1、top/bottom等更可靠的布局方式。
百分比高度为什么算出来是 0
因为父容器 height 是 auto，浏览器根本没法算出“50%”对应多少像素——auto × 0.5 是 NaN，CSS 引擎直接丢弃该声明，退回到 height: auto 行为。这不是“没生效”，而是“无基准可依”。
- 常见现象：
.content设了height: 100%，但实际高度为 0；开发者工具里看 computed height 确实是auto - 哪怕父元素用了
display: flex或display: grid，只要它自身没显式高度（比如没写height: 400px或height: 100vh），子元素的百分比高度照样失效 - 绝对定位元素更隐蔽：它的
height: 50%默认参照的是**最近的position: relative/absolute/fixed祖先**，而不是视觉上紧挨着的父 div；如果找不到，就按视口高度算
html 和 body 必须同时设 height: 100%
只给 body 设 height: 100% 没用，因为它的父级 html 还是 auto，100% 就失去参照。必须两者都设，且清除默认边距：
html, body {
height: 100%;
margin: 0;
padding: 0;
}
- 漏掉
margin: 0可能导致页面出现意外滚动条，或100%实际撑出视口 - 这个设置只是“起点”，不是“终点”——中间任何一层祖先（比如
.layout、.main）要是height: auto，链就断了 - 用开发者工具选中目标父容器，在 Computed 面板确认它的
height是具体数值（如520px或100vh），而不是auto
Flex 容器里别硬写 height: 100%
Flex 子项的尺寸由 flex 属性主导，height 基本被忽略。尤其在 flex-direction: column 下，height: 80% 几乎永远无效。
- 正确做法：删掉
height，改用flex: 1（等价于flex: 1 1 0）让子项占满剩余空间 - 如果需要响应式切换（比如大屏用
flex: 1，小屏用固定比例），可以组合写：min-height: 30%; flex: 1; - 避免同时写
align-self: stretch和height: 100%——前者是 Flex 默认行为，后者冗余，还可能触发 Safari 旧版本 bug
绝对定位元素的 height: 50% 总是按视口算？
是的，当它找不到有明确高度的定位祖先时，height: 50% 就会基于视口高度计算。典型场景：弹窗里的 .modal-content 写了 height: 80%，结果在小屏上溢出。
- 解法一：确保最近的定位祖先（比如
.modal-body）有明确高度，例如height: 60vh或max-height: 70vh - 解法二：放弃百分比，改用
top/bottom区间控制，比如top: 60px; bottom: 20px;，更稳定且不依赖父高 - 注意：绝对定位元素的百分比宽高是相对于其包含块的
padding box计算的，而非 content box；非定位元素才是按 content box 算
真正难处理的不是某一层没设高，而是整条祖先链中某处高度由内容动态撑开（比如一段文字长度变化），就会让后续所有百分比高度瞬间失效。这种场景下，flex: 1 或 top/bottom 控制比死磕 height: 100% 更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
