纯CSS无法实现真正的自适应textarea高度，因其不响应内容行数变化；height:auto无效是浏览器标准行为，仅rows和显式height生效；动态伸缩必须用JS并注意重置高度、换行符归一化及requestAnimationFrame。
纯 CSS 方案能实现“视觉上”的自适应，但无法真正响应内容行数变化——它只是让 textarea 看起来不滚动、不塌陷，实际高度仍是固定的。如果你接受「最小高度 + 滚动条出现即止」的交互（比如评论框默认 1 行，超了就滚），那可以不用 JS；但若要求「输入多少行就撑多高、删减后立刻缩回」，必须用 JS，CSS 本身读不到文本内容或换行数。
为什么 height: auto 在 textarea 上无效
height: auto 对 textarea 是个摆设：浏览器规范里它只响应 rows 和显式 height 值，内容溢出时强制显示滚动条，而不是拉伸自身。你写 height: auto，它就当没看见，依然按 rows 或默认行高渲染。
- Chrome/Firefox/Safari 都如此，不是 bug，是标准行为
-
min-height能生效，但仅控制「最低底线」，不触发动态增长 - 加
overflow: hidden只会把多余内容裁掉，用户看不见
纯 CSS「伪自适应」的可行配置
适合场景：后台表单、内部工具、对体验要求不高的输入框，目标是「别太矮、别乱滚、允许手动拖拽」。
- 必须设
min-height（如min-height: 40px），否则空时塌成一条线 - 加
max-height（如max-height: 200px）+overflow-y: auto，超限时才滚动 -
resize: vertical或resize: none，禁用水平拖拽避免布局错乱 -
box-sizing: border-box，确保padding不额外撑宽/撑高 - 别写
height: 100%或flex: 1包裹textarea，会和 JS 方案冲突，且纯 CSS 下无意义
示例：<textarea rows="1" style="min-height: 40px; max-height: 200px; overflow-y: auto; resize: vertical; box-sizing: border-box;"></textarea>
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
立即学习“前端免费学习笔记（深入）”；
JS 方案里最易漏掉的三件事
哪怕只写 3 行 JS，漏掉任意一项都会导致 iOS 卡住、删文字不缩高、粘贴后底部留白：
- 每次
input事件第一句必须是textarea.style.height = 'auto'—— 不重置，scrollHeight就被旧高度约束住 - IE11 要做换行符归一化：
textarea.value = textarea.value.replace(/\r\n/g, '\n')，否则空行高度少算一行 - iOS Safari 必须包
requestAnimationFrame：requestAnimationFrame(() => { textarea.style.height = textarea.scrollHeight + 'px' })，否则快速输入时高度跳变
样式和 JS 计算必须一致：font-size、line-height、padding、border 全部显式声明，别依赖继承或 user agent stylesheet。
真正麻烦的从来不是写几行 JS，而是所有浏览器对「高度计算时机」和「换行符语义」的处理差异。哪怕你只支持 Chrome，用户用 iPad 打开就可能出问题 —— 这些坑不在代码里，在渲染引擎底层。
