CSS 中 height: 80% 失效，根本原因在于父容器未设置明确高度，导致百分比无法计算；而 em 是相对于字体大小的绝对单位，无需依赖父级高度即可生效。本文详解原理、复现问题、提供可靠修复方案，并给出最佳实践建议。
css 中 `height: 80%` 失效，根本原因在于父容器未设置明确高度，导致百分比无法计算；而 `em` 是相对于字体大小的绝对单位，无需依赖父级高度即可生效。本文详解原理、复现问题、提供可靠修复方案，并给出最佳实践建议。
在 CSS 布局中，初学者常遇到这样一个困惑：为什么给
? 百分比高度的计算规则
根据 CSS 规范，height 的百分比值是相对于其包含块（containing block）的高度计算的。关键限制如下：
- 若包含块的高度为 auto（即由内容撑开，未显式指定），且该元素不是绝对定位（position: absolute/fixed），则 height: X% 会被计算为 auto —— 也就是“失效”，表现为高度塌缩或仅容纳默认行高；
- 根元素（）上的百分比高度，则相对于初始包含块（initial containing block，通常为视口）。
在你的代码中：
<div class="text-box">
<div id="t-box">
<textarea id="t-area"></textarea>
</div>
</div>#t-area 的包含块是 #t-box，而 #t-box 的高度是 auto（仅靠 padding: 1em 无法提供明确高度），其父级 .text-box 和 .container 同样未设置 height 或 min-height。因此 height: 80% 无基准可依，最终退化为 auto。
立即学习“前端免费学习笔记（深入）”；
✅ 正确修复方式（推荐三种）
方案 1：为直接父容器设置明确高度（最直观）
#t-box {
height: 300px; /* 或 min-height: 200px */
padding: 1em;
}
#t-area {
width: 100%;
height: 80%; /* 现在 80% 相对于 300px → 240px */
padding: 1em;
resize: none;
}方案 2：使用 Flexbox 实现响应式拉伸（现代推荐）
.text-box {
border: 1px solid black;
padding: 1em;
display: flex;
flex-direction: column;
height: 400px; /* 为 .text-box 设定高度，作为 flex 容器基准 */
}
#t-box {
flex: 1; /* 占满剩余空间 */
padding: 1em;
}
#t-area {
width: 100%;
height: 100%; /* 此时 100% 相对于 #t-box 的 flex 分配高度 */
padding: 1em;
resize: none;
}方案 3：使用 vh 或 rem 替代（语义清晰、免依赖父高）
#t-area {
width: 100%;
height: 30vh; /* 视口高度的 30%，始终有效 */
padding: 1em;
resize: none;
}
/* 或基于根字体大小 */
html { font-size: 16px; }
#t-area { height: 20rem; } /* = 320px */⚠️ 注意事项与常见误区
- ❌ 不要仅依赖 min-height：min-height 不会触发百分比计算（它只是下限），必须用 height 或 flex 等能提供确定高度上下文的方式；
- ❌ 避免链式 auto 依赖：若 .container → .text-box → #t-box 全部无显式高度，任一环节断裂都会导致百分比失效；
- ✅ em / rem 有效是因为它们是相对长度单位，但不依赖父容器尺寸：em 相对于当前元素 font-size，rem 相对于根元素 font-size，二者均为“可计算的绝对量”；
- ✅ width: 100% 通常有效，是因为块级元素的包含块宽度默认由父容器决定（且多数布局中父宽明确），而高度无此默认保障。
? 总结
| 单位 | 是否依赖父容器高度 | 是否需要显式父高 | 典型适用场景 |
|---|---|---|---|
| %（height） | ✅ 是 | ✅ 必须 | 父容器高度可控的卡片、模态框等 |
| em / rem | ❌ 否 | ❌ 否 | 字体相关尺寸、固定比例缩放 |
| vh / vw | ❌ 否 | ❌ 否 | 全屏布局、视口基准组件 |
| flex: 1 | ✅ 是（间接） | ✅ 需 flex 容器有高度 | 现代弹性布局主区域填充 |
记住一句话：CSS 百分比高度不是“占父元素的百分比”，而是“在父元素有确定高度前提下，才按其计算”。理解这一点，就能从根本上避开 90% 的高度布局陷阱。
