移动端垂直布局应使用flex容器+column方向+flex-grow实现弹性拉伸，而非height:100vh；因100vh在ios safari等浏览器中会包含地址栏高度且软键盘弹出时不重算，导致截断或错位。
移动端垂直空间吃紧时，单纯用 height: 100vh 或固定像素值会卡死布局；真正能“弹性拉伸又不溢出”的解法，是靠 flex 容器 + flex-direction: column + flex-grow 组合控制高度分配，而不是硬设高度。
为什么 height: 100vh 在移动端经常失效
iOS Safari 和部分 Android WebView 里，100vh 会把地址栏、工具栏高度也算进去，滚动时视口高度动态变化，导致内容被截断或留白。更糟的是，软键盘弹出后 vh 不重算，页面直接错位。
常见错误现象：
- 页面底部被遮挡，无法滚动到底
- 表单聚焦后内容被顶出可视区
- 安卓 Chrome 滚动后顶部空白突然变大
根本原因：浏览器对 vh 的实现依赖于“初始视口”，而移动端视口是可变的。
flex: 1 和 flex-grow: 1 在垂直布局中的实际行为差异
当容器设为 display: flex; flex-direction: column 后，子元素的 flex: 1 并不等于“填满剩余高度”——它只在有“可用空间”时才生效，而这个空间由其他兄弟元素的实际高度决定。
关键点：
-
flex: 1是flex-grow: 1; flex-shrink: 1; flex-basis: 0的简写，flex-basis: 0会让它忽略自身内容高度，纯按比例分空间 - 如果某个子项写了
height: 200px，它就不再参与弹性分配，其他项的flex: 1只分剩下的空间 - 想让“内容区”拉伸占满剩余高度，必须确保它前面的 header 和后面的 footer 都是固定高度或
flex-shrink: 0
典型结构示例：
.page {
display: flex;
flex-direction: column;
height: 100vh;
}
.header { height: 44px; flex-shrink: 0; }
.main { flex: 1; overflow-y: auto; }
.footer { height: 48px; flex-shrink: 0; }
如何让内容区自适应且支持滚动而不撑爆父容器
很多人以为加了 flex: 1 就万事大吉，结果内容一多就溢出、滚动条失效。核心在于：弹性容器必须有明确的高度上限，且内容区要主动限制自身可滚动范围。
实操要点：
- 父容器（如
.page）必须设height: 100vh或min-height: 100vh，否则flex无参考高度 - 内容区（
.main）不能只靠flex: 1，还要加min-height: 0—— 否则在某些浏览器里它会无视flex规则，按内容撑高 - 滚动必须加在内容区内，而不是整个
.page上；同时要防止 iOS Safari 滚动穿透，需加-webkit-overflow-scrolling: touch - 如果内容区里还有嵌套 flex 容器，记得给它们也设
min-height: 0，否则链式失效
最小可靠组合：
.main {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
兼容性与真机调试最容易忽略的点
不是所有 flex 行为在旧版 iOS 或低端安卓上一致。比如 iOS 12 以下对 flex-basis: 0 支持不稳定，min-height: 0 在某些微信内置浏览器里会被忽略。
建议兜底策略：
- 用
@supports (display: flex)包裹 flex 样式，避免老浏览器解析错乱 - 对 iOS 低版本，额外加
max-height: calc(100vh - 92px)（减去 header + footer 高度），作为 fallback - 真机调试时务必在 Safari 开发者工具里勾选 “Disable accelerated compositing”，否则
overflow: auto可能假死 - 微信内嵌浏览器常禁用
-webkit-overflow-scrolling: touch，可改用position: fixed+top/bottom手动计算高度
最麻烦的其实是“软键盘弹起后内容区高度没重算”——这没法靠 CSS 解决，必须监听 resize 或 focusin 事件，用 JS 动态更新 .main 的 max-height。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
