如何修改CSS使textarea高度始终匹配其父div容器高度？

在一个div容器中嵌入了textarea组件，期望textarea的高度能够完全匹配该div容器的高度。当前textarea的宽度适配正常，但初始为空状态下仅填充了div约20%的高度；当通过Ajax请求获取文本并填充textarea后，其高度仍维持在div的约20%，且出现滚动条。请问如何修改CSS以确保textarea高度始终匹配div容器？

原始代码 #

CSS #

#answerBox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 5px auto;
  padding: 5px;
  font-size: 10px;
  text-align: left;
  position: relative;
}

#answerBoxDiv {
  width: 90%;
  min-height: 50%;
  margin: 5px auto;
  border: 4px solid #00bfb6;
  padding: 5px;
  font-size: 10px;
  text-align: left;
  position: relative;
}

HTML #

<div id="answerBoxDiv">
  <textarea id="answerBox"></textarea>
</div>

解决方案 #

要让textarea完全填满div容器的高度，需要调整以下CSS细节：

• 给根元素设置高度基准，确保父容器的min-height能正确计算
• 给父容器添加盒模型规则，避免padding额外撑开高度
• 移除textarea的margin，消除高度占用
• 禁止用户手动调整textarea大小，保持布局一致性

修改后的完整CSS：

/* 确保根元素有高度基准，让父容器的min-height生效 */
html, body {
  height: 100%;
  margin: 0;
}

#answerBox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0; /* 移除margin，避免占用高度空间 */
  padding: 5px;
  font-size: 10px;
  text-align: left;
  border: none; /* 可选：去掉textarea默认边框，和父容器边框区分 */
  resize: none; /* 禁止用户调整textarea大小 */
  outline: none; /* 可选：去掉聚焦时的默认轮廓 */
}

#answerBoxDiv {
  width: 90%;
  min-height: 50%;
  margin: 5px auto;
  border: 4px solid #00bfb6;
  padding: 5px;
  font-size: 10px;
  text-align: left;
  position: relative;
  box-sizing: border-box; /* 让padding纳入容器高度计算 */
}

关键修改说明 #

1. 根元素高度设置：html, body { height:100%; margin:0; } 解决了父容器min-height:50%无基准的问题，确保容器能按预期高度渲染。
2. 父容器盒模型：box-sizing: border-box让容器的padding不会额外增加总高度，保证内部textarea的100%高度能完全填满容器。
3. textarea的margin移除：原margin:5px auto会在textarea上下留出间距，导致无法填满父容器高度，改为margin:0后消除了这个问题。
4. 禁止调整大小：resize:none避免用户手动改变textarea尺寸，破坏布局一致性。

修改后，无论是初始空状态还是填充内容后，textarea都会完全匹配div容器的高度。若内容超出容器高度，textarea会自动显示滚动条；如果需要让textarea高度随内容自动变化，则需要配合JavaScript实现。

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