真正起效的是 min-height + display: flex 或 display: grid；height: auto 仅由内容决定高度，不解决塌陷、键盘压缩、溢出等问题，且在 iOS Safari 中 100vh 动态失准；空 div 高度为 0 是正常渲染规则；textarea 纯 CSS 自适应仍受限，需 JS 补位。
直接说结论：用 min-height: auto 没用，height: auto 是默认行为但不解决“撑开”问题；真正起效的是 min-height + display: flex 或 display: grid 容器配合子项行为控制。
为什么 height: auto 在移动端看起来“不自适应”？
因为 height: auto 只表示“由内容决定高度”，但它不阻止父容器塌陷、不处理键盘弹出导致的视口压缩、也不约束子元素溢出。尤其在 iOS Safari 中，100vh 会因地址栏隐藏/显示动态变化，导致依赖它的 min-height: 100vh 失准。
- 空
<div>高度为 0 —— 不是 bug，是渲染规则：没内容、没 padding、没 border、没伪元素，就不可见 -
height: auto对<input>无效，它始终按浏览器 UA 样式固定行高 - 用
flex: 1的子项若父容器没设明确高度（如height: 100vh），在部分安卓 WebView 中会失效
用 display: flex 实现顶部固定、底部自适应撑满
这是最稳定、兼容性最好的方案，适用于聊天页、表单页、详情页等“头+内容+尾”结构。
- 父容器必须设
height: 100vh或min-height: 100vh（注意 iOS 键盘弹出时失真，可改用100dvh，Chrome 105+/Safari 16.4+ 支持） - 头部设固定高度（如
height: 56px），底部同理 - 中间内容区用
flex: 1，并加overflow-y: auto防止内容溢出不可见 - 避免给中间区设
height: 100%—— 它会尝试继承父高，但父高若未显式定义，计算结果为 0
.container {
display: flex;
flex-direction: column;
height: 100dvh; /* 比 100vh 更可靠 */
}
.header { height: 56px; }
.content { flex: 1; overflow-y: auto; }
.footer { height: 48px; }用 display: grid 实现多区域高度分配
适合需要精确控制多块区域比例或留白的场景，比如带悬浮操作栏的列表页。
立即学习“前端免费学习笔记（深入）”；
-
grid-template-rows: auto 1fr auto中的1fr表示“剩余空间”，比flex: 1更语义清晰 - 若某区域需最小高度（如输入框区域），用
minmax(44px, 1fr)替代单纯1fr - 避免在
grid容器上同时用height: 100%和min-height: 100vh，容易触发 Safari 的渲染竞争 - 老版本 Android WebView（如 UC 内核）不支持
1fr，需降级为flex方案
.page {
display: grid;
grid-template-rows: auto minmax(44px, 1fr) auto;
height: 100dvh;
}textarea 高度随内容伸缩的纯 CSS 尝试边界
想只靠 CSS 让 <textarea> 高度跟随文字行数？目前只有部分新浏览器能勉强做到，必须接受降级。
-
height: auto+min-height: 44px+resize: none是底线配置，防止拖拽破坏布局 -
height: fit-content在 Safari 16.4+ 和 Chrome 102+ 可用，但 iOS 16.3 及更早版本完全忽略 -
overflow: hidden必须配 JS 动态设高，否则内容超出时会突然出现滚动条，造成视觉跳变 - 别信
field-sizing: content—— 它是实验性属性，无任何主流浏览器实现
真正难的不是写几行 CSS，而是判断什么时候该放弃纯 CSS、果断接入轻量 JS 补位——比如键盘弹出时重算 100vh、或者监听 textarea 输入后调用 scrollHeight。那些看似“自适应”的页面，背后往往藏着一行没贴出来的 JS。
