当为元素设置百分比高度（如 `height: 90%`）时，若其父容器未显式定义高度，该百分比将无法计算，导致高度“不生效”——这是 css 布局中常见的隐式依赖问题。
在 css 中，百分比高度（height: X%）是相对于其包含块（containing block）的 height 计算的，而非视口或祖先元素的任意尺寸。这意味着：只有当父元素具有明确的高度值（非 auto）时，子元素的百分比高度才有计算依据。
在你的代码中，.rightbox 的直接父元素是
✅ 正确解法是向上补全高度链：确保从根元素到目标元素的每一级父容器都具备可计算的高度。
以下是修复后的完整 CSS 片段：
立即学习“前端免费学习笔记（深入）”；
html { background: linear-gradient(to left, #19e5e2f1, #0a60f5); background-repeat: no-repeat; background-attachment: fixed; } html, body { width: 100%; height: 100%; margin: 0; /* 推荐重置默认 body margin */ } /* 关键修复：为 main 显式设置高度 */ main { height: 100%; /* 使 .rightbox 的 90% 有据可依 */ } .rightbox { position: relative; left: -50px; Float: right; height: 90%; /* 现在能正确解析为 90% × main.height */ width: 45%; background: #229492f1; opacity: 0.5; border-radius: 15px; }⚠️ 注意事项：
- float 布局已逐渐被 flexbox / Grid 取代；若无需兼容老旧浏览器，建议改用现代布局（例如对 main 应用 display: flex 并设置 justify-content: flex-end）；
- 使用 float 时，父容器可能因浮动塌陷而丢失高度——虽然此处通过 height: 100% 强制修复，但更健壮的方式是清除浮动或改用 display: flow-root；
- 所有参与百分比高度链的元素（html → body → main → .rightbox）都必须避免 height: auto，否则链路中断。
? 总结：CSS 百分比高度不是“相对于视口”，而是严格遵循“父定高、子计算”的规则。排查此类问题时，应逐级检查父容器的 computed height 是否为具体数值（如 500px），而非 auto。