当为元素设置百分比高度（如 `height: 90%`）时，若其父容器未显式定义高度，该百分比将无法计算，导致高度“不生效”——这是 css 布局中常见的隐式依赖问题。
在 CSS 中，百分比高度（height: X%）是相对于其包含块（containing block）的 height 计算的，而非视口或祖先元素的任意尺寸。这意味着：只有当父元素具有明确的高度值（非 auto）时，子元素的百分比高度才有计算依据。
在你的代码中，.rightbox 的直接父元素是 <main>，而 <main> 默认采用 height: auto（由内容撑开），即使 <html> 和 <body> 已设 height: 100%，<main> 仍无固有高度。因此 height: 90% 实际计算为 90% × 0px = 0px，视觉上表现为“高度不生效”。
✅ 正确解法是向上补全高度链：确保从根元素到目标元素的每一级父容器都具备可计算的高度。
以下是修复后的完整 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。
