CSS 百分比高度失效的根源与解决方案

当为元素设置百分比高度（如 `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。