CSS 根据文本自动调整文本区域大小的规则

Question

假设我有一个 textarea。我想在每次更改 value/text 时自动调整 textarea 的高度。可以用 Javascript 来完成，但我很想知道是否有一个纯粹的 HTML/CSS 解决方案。

Answer 1

至少对于 <textarea> 而言，使用纯 CSS 无法做到这一点，原因是，只能通过 JavaScript 捕获交互。但是你可以让 <div> 有一个 contenteditable，一个 fake <textarea> 可以成为可能。

片段

div {
  display:inline-block;
  border: solid 1px #999;
  min-height: 100px;
  width: 300px;
}

<div contentEditable></div>

CSS rule to auto-resize textarea upon text