form 元素默认不自动撑开，高度宽度取决于子元素和 css；常见塌陷因浮动或绝对定位导致，应避免破坏文档流，优先用 textarea 实现自适应高度而非 contenteditable。
form 元素本身不会自动撑开，得靠子元素或 CSS 控制
HTML form 是个无样式语义容器，默认 display 是 block，但它的高度、宽度完全取决于内部内容和 CSS 规则。很多人以为加了 textarea 或多行 input 它就会“自适应”，其实不会——它只是老老实实包裹子元素，不主动计算内容高度。
常见错误现象：form 高度塌陷（比如里面只有浮动元素或绝对定位元素），或者宽度被父容器强行截断，导致按钮换行、文字溢出。
- 确保子表单控件（如
input、textarea、select）没有意外的float或position: absolute，否则form无法感知其尺寸 - 给
form加display: flex或display: grid会破坏默认流式布局，除非你明确想用 Flex 布局控制子项，否则慎用 - 如果表单里有
textarea，它的rows属性只影响初始行数，真实高度仍由内容+CSS 决定；配合resize: vertical和min-height更可控
textarea 和 contenteditable 区别很大，别混用
想让表单区域随输入内容变高？多数人第一反应是用 textarea，但它本质是单值文本控件，不能嵌套 HTML，也不支持富文本。有人误用 div[contenteditable="true"] 替代，结果发现：表单提交时它压根不会传值，除非手动把内容同步到隐藏 input 或监听 submit 事件取 innerText。
使用场景很明确：textarea 适合纯文本输入（评论、描述等）；contenteditable 是 DOM 操作级方案，适合富文本编辑器底层，但必须自己处理序列化、XSS 过滤、空内容判断。
立即学习“前端免费学习笔记（深入）”；
-
textarea支持原生autofocus、required、maxlength，contenteditable全都不支持，得手写逻辑 - 移动端上，
contenteditable键盘兼容性差，iOS 常出现光标错位、输入法异常，textarea稳定得多 - 若真要用
contenteditable实现“自适应高度”，至少加style="min-height: 100px; max-height: 300px; overflow-y: auto;"，并监听input事件动态设scrollHeight
JavaScript 动态调整高度时，别直接改 style.height
用 JS 监听输入并拉伸表单区域，最常见错误是直接写 form.style.height = "auto" 或 form.style.height = form.scrollHeight + "px"。前者在内联样式里无效（auto 被忽略），后者会锁死高度，导致后续内容收缩时留白或遮挡。
真正可靠的做法是：只控制可伸缩子元素（如 textarea 或包装 div）的高度，让 form 自然跟随。关键在于避免破坏文档流。
- 对
textarea：监听input事件，先设height: "auto"，再读scrollHeight，最后赋值；记得加box-sizing: border-box防止边框撑大 - 不要用
offsetHeight或clientHeight判断内容高度，它们不含滚动区，scrollHeight才是真实内容高度 - 如果表单里有多个可变高字段（比如多个
textarea），别统一设form高度，而是让每个字段自己管理自身高度，form保持min-height即可
移动端键盘弹起时，viewport 缩放和滚动会干扰自适应效果
iOS Safari 和部分安卓浏览器在软键盘弹出时，会强制缩放页面或重置 viewport，导致 form 高度计算失准、光标被遮挡、scrollHeight 返回错误值。这不是代码 bug，是浏览器行为。
典型表现：输入几行后，textarea 高度突然跳变、卡住不动，或失去焦点后高度没恢复。
- 加
viewportmeta 标签限制缩放：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> - 监听
focusin和focusout，在聚焦时临时移除min-height，失焦后延时（setTimeout(..., 100)）再恢复，避开键盘动画周期 - 安卓 WebView 中，
resize事件可能不触发，建议优先用input事件而非依赖窗口变化
最麻烦的点往往不在怎么拉高，而在怎么准确知道“现在该多高”——内容高度、边框圆角、字体行高、移动端键盘状态，全得凑一块算，漏一个就错位。实际项目里，宁可加一点固定 padding，也别强求像素级贴合。
