为何textarea用百分比设置height无效，改用em却正常？

核心原因是百分比高度的生效规则：当给元素设置height: X%时，这个百分比是相对于它的直接父元素的高度计算的，但前提是父元素必须有一个明确的高度值（不能是auto，也不能是仅靠内容撑开的自适应高度）。

看你的代码：

• textarea的直接父元素是#t-box，这个元素只设置了padding:1em，没有指定height，它的高度完全由内部内容（textarea）撑开，属于auto高度。
• 往上的.text-box、.container也都没有设置明确高度，都是靠内容自适应。

这种情况下，浏览器无法确定父元素的基准高度，自然没法计算height:80%对应的实际像素值，所以这个样式不会生效，textarea会回到默认高度。

而em单位是相对于当前元素（或继承的）字体大小的相对单位，不管父元素有没有高度，浏览器都能基于字体大小算出实际高度（比如默认字体大小16px时，25em就是400px），所以height:25em能正常生效。

让百分比高度生效的方法 #

1. 给父元素设置固定高度

#t-box {
  padding: 1em;
  height: 300px; /* 给父元素设置明确高度 */
}
#t-area {
  width: 100%;
  height: 80%; /* 基于父元素300px计算，得到240px高度 */
  padding: 1em;
  resize: none;
}

2. 用flex布局让父元素填充可用空间

.text-box {
  border: 1px solid black;
  padding: 1em;
  display: flex;
  flex-direction: column;
  min-height: 400px; /* 给上层容器设置最小高度 */
}
#t-box {
  padding: 1em;
  flex: 1; /* 让容器填充.text-box的剩余空间 */
}
#t-area {
  width: 100%;
  height: 80%; /* 父元素有了明确可用高度，百分比生效 */
  padding: 1em;
  resize: none;
}

3. 用vh单位直接基于视口高度设置

#t-area {
  width: 100%;
  height: 60vh; /* 占浏览器视口高度的60% */
  padding: 1em;
  resize: none;
}

内容的提问来源于stack exchange，提问作者Souvik Dey