textarea的rows属性只接受整数，不支持百分比；控制高度应使用min-height、max-height等CSS属性或scrollHeight动态计算。
textarea的rows属性根本不支持百分比
rows 是 HTML 属性，只接受整数（如 rows="4"），不是 CSS 属性，所以写 rows="100%" 或 rows="50%" 会直接被浏览器忽略——它根本不会解析，也不会报错，只是静默失效。你看到“没效果”，其实是语法错误导致属性压根没生效。
为什么有人误以为 rows 能写百分比
常见混淆来源有两个：
- 把
rows和 CSS 的height搞混：比如写了style="height: 80%"却发现没用，就回头去改rows，试图“曲线救国” - 在 Flex/Grid 容器里看到
textarea撑满父宽/高，误以为是rows在响应，其实是父容器的布局行为在起作用
记住：rows 只参与初始渲染尺寸估算，且只认整数；它不响应视口、缩放、字体变化，更不支持任何单位。
真正要控制高度，该用哪些 CSS 属性
放弃 rows 控制高度的幻想，用以下组合才可靠：
立即学习“前端免费学习笔记（深入）”；
-
min-height：设一个合理下限（如min-height: 4.8em对应约 4 行，基于line-height: 1.2） -
max-height：防无限拉伸（如max-height: 200px） -
resize: vertical：允许用户手动调整，或resize: none时确保min-height足够 -
box-sizing: border-box：避免padding导致内容区意外变窄 - 显式设置
font-size和line-height：否则em计算会漂移
示例：
textarea {
width: 100%;
min-height: 4.8em;
max-height: 200px;
font-size: 1rem;
line-height: 1.2;
box-sizing: border-box;
padding: 0.5rem;
resize: vertical;
}
如果必须动态匹配内容高度，别碰 rows，用 scrollHeight
JS 改 textarea.rows = N 不仅触发重排，还会和 CSS 冲突（比如你设了 style.height，rows 就彻底失效）。正确做法是：
- 监听
input事件（不是change） - 先清除内联
height：el.style.height = '' - 再赋值：
el.style.height = el.scrollHeight + 'px' - 加
overflow: hidden防双滚动条
注意：不要用 textarea.scrollHeight 直接设高度而不清空旧 height，第一次之后就容易卡死。
最常被忽略的一点：很多人花时间调试 rows 的各种写法，却没意识到它从设计上就不是用来做响应式高度控制的——它的角色只是语义 fallback 和旧浏览器兜底。真要适配内容、屏幕、缩放，CSS + JS 才是唯一路径。
