textarea height不生效是因为默认content-box盒模型，必须设box-sizing: border-box使height包含padding和border；resize: none禁用拖拽；field-sizing: content为Chrome实验性属性且兼容性差，生产环境应使用JS+scrollHeight方案。
textarea height不生效？先看box-sizing
直接写 height: 100px 却发现实际高度远超预期，这是最常见的现象。根本原因是 textarea 默认使用 content-box 盒模型：你设的 height 只算内容区，加上默认的 padding（各浏览器不同，Chrome 约 2px，Firefox 约 4px）和 border（通常 2px），总高就飘了。
必须加这一句：box-sizing: border-box。它让 height 表示“从上边框到下边框的总高度”，含 padding 和 border。全局重置最稳妥：textarea { box-sizing: border-box; }。
- IE8+ 全支持，无需前缀
- 不加它，所有后续尺寸控制都在赌浏览器 UA 样式
- 建议连同
input、select、button一起重置
禁止拖拽拉伸的两种写法
用户右下角拖拽会破坏布局，尤其在响应式场景里。有两种处理方式，效果不同：
-
resize: none：彻底隐藏拖拽手柄，推荐首选。加在textarea上即可，无需额外限制max-width/max-height - 仅设
width/height+max-width/max-height：拖拽图标仍在，但拉到边界就停。容易误判为“还能拉”，体验差
注意：resize 默认值是 both，不是 none；只禁用垂直方向可用 resize: horizontal，反之亦然。
立即学习“前端免费学习笔记（深入）”；
field-sizing: content 是什么？别乱用
这是 Chrome 123+ 新增的实验性属性，能让 textarea 高度随内容自动撑开（类似自适应），但它有硬伤：
- 不兼容 Safari、Firefox，目前仅 Chrome 支持
- 设置后，
value属性读写可能异常，表单提交行为不稳定 - React/Vue 中双向绑定失效风险高，
v-model或useState可能无法同步 - 若真要用，必须搭配
min-height和max-height，否则空内容时高度为 0
生产环境建议绕过它，用 JS 方案（如监听 input 事件 + scrollHeight）更可控。
固定宽高的安全写法
要真正锁死尺寸，四点缺一不可：
- 写死
width和height（比如width: 300px; height: 120px;） - 加
box-sizing: border-box - 加
resize: none - 显式设
overflow-y: auto（否则内容溢出时可能被裁剪，或触发意外换行）
别依赖 cols/rows 属性控制大小——它们受字体、字号、浏览器 UA 影响极大，同一数值在 Chrome/Firefox/Edge 下渲染高度差异可达 10px 以上。
