无需JavaScript，能否让HTML TextArea高度自适应内容？

我有一段textarea代码：

<textarea contentEditable="true">  
testing autoheight lkjul;khjfds
kjhkjghg

fgdgdsf
</textarea>

想要让它的高度自动适配文本内容，试了CSS的height:auto;但没效果。目前已经用JavaScript实现了这个功能：

const tx = document.getElementsByTagName("textarea");

for (let i = 0; i < tx.length; i++) {
  if (tx[i].value != ''){ 
    tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
  }
}

但我觉得不需要JS也能做到，查了类似问题都是JS方案，想问有没有非JavaScript的解决方法？

答案：纯CSS可以实现，但要换用contenteditable的div模拟textarea #

原生<textarea>因为表单控件的特殊属性，纯CSS确实没办法让它高度随内容自适应——height:auto对它不起作用，浏览器默认会给它固定高度，内容超出就显示滚动条。不过你可以用带contenteditable="true"的<div>来模拟textarea的效果，同时实现纯CSS下的高度自适应：

实现代码

<div 
  class="fake-textarea" 
  contenteditable="true"
  role="textbox"
  aria-multiline="true"
>
  testing autoheight lkjul;khjfds
  kjhkjghg

  fgdgfdsf
</div>

.fake-textarea {
  /* 还原textarea的默认样式 */
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-height: 60px; /* 设置最小高度，避免内容太少时过于窄小 */
  font-family: system-ui, monospace; /* 匹配textarea默认字体 */
  white-space: pre-wrap; /* 保留换行和空格，和textarea行为一致 */
  resize: vertical; /* 可选：允许用户手动拖动调整高度 */
}

/* 聚焦样式，模拟原生textarea的聚焦状态 */
.fake-textarea:focus {
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

为什么原生textarea不行？ #

浏览器对<textarea>的布局有特殊规则：它的高度默认由rows属性或CSSheight控制，本质是一个可滚动的容器，height:auto无法触发它根据内容自动撑开高度——这是浏览器的内置行为，纯CSS无法修改。

额外说明 #

• 如果需要把这个模拟的文本框数据提交到表单，得加个隐藏的<input>，在用户输入时把div的内容同步到input里（这一步需要一点点JS，但核心的高度自适应是纯CSS完成的）
• 加上role="textbox"和aria-multiline="true"是为了无障碍访问，让屏幕阅读器能正确识别这是一个多行文本输入控件

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