百分比高度在css中需父容器有明确高度才能生效，否则计算为0；正确做法是确保父级链中至少有一个锚定高度，或用padding-top配合绝对定位实现宽高比锁定。
百分比高度在CSS中不能直接“自由生效”，它必须依赖父容器有明确的高度值，否则会计算为0 —— 这是绝大多数人卡住的第一步。
为什么 height: 50% 有时完全不显示
因为 height 的百分比是相对于**父元素的计算后高度**（computed height），不是视口或父元素的 width，也不是“可用空间”。如果父元素没设 height、min-height 或使用 height: auto（默认），那它的计算高度就是 0，子元素 50% 就等于 0。
常见错误场景：
- 父容器只写了
width: 100%，没写任何高度相关声明 - 父容器是
display: flex但没设height，且子项用align-items: stretch仍无法撑开（因父级无高度基准） - 用了
position: absolute的子元素，父级未设position: relative且无显式高度
height 百分比生效的必要条件
要让 height: X% 生效，父元素必须满足以下至少一项：
-
height为具体值（如height: 400px、height: 80vh） -
min-height+height: auto（但此时百分比仍按min-height计算，非内容高度） - 父元素本身也由更上层的百分比高度推导而来，且整条链上有**至少一个锚定高度**（比如根元素设了
html, body { height: 100% }）
典型可靠写法：
html, body {
height: 100%;
}
.container {
height: 100%;
}
.box {
height: 50%; /* ✅ 此时有效 */
}
想让高度随宽度变化（比如保持 16:9）？别用 height: X%
因为 height 百分比永远参照父元素高度，和自身宽度无关。你要的是“宽高比锁定”，正确解法是用 padding-top 配合 position: absolute：
-
padding-top的百分比值，始终以**父元素宽度**为基准（这是 CSS 规范定义的） - 把内容区域绝对定位进这个 padding 撑开的空间里
- 这样无论父容器宽度怎么变（比如响应式缩放），padding-top 自动按比例调整，视觉高度就跟着宽度走了
最小可行示例：
.ratio-box {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 = 9/16 = 0.5625 */
}
.ratio-box > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
真正容易被忽略的一点：padding-top 方案里，父容器必须是块级、有宽度（哪怕只是 width: 100%），且不能是 display: inline 或未触发 BFC 的状态；另外，这个技巧对语义化和可访问性无额外影响，但若需支持键盘焦点或屏幕阅读器，记得给内部元素加 tabindex="0" 或合理语义标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
