手机端三栏布局应使用display: flex，父容器设flex-direction: column和min-height: 100vh，三栏用flex: 1均分高度，底部用position: sticky + bottom: 0实现真正粘底，同时需为html和body设height: 100%并加overflow: hidden防撑开。
手机端三栏布局用 display: flex 最省代码
直接用 Flex 布局，不用 Grid、不用 float、不用 JS 计算高度，三行代码搞定结构。关键不是“能实现”，而是“改一行就适配不同设备”。
常见错误是强行复用 PC 端的 float 或 inline-block 写法，结果在 iOS Safari 里错位、换行、塌陷——这些方案在移动端本就不该出现。
-
display: flex在所有现代手机浏览器（包括 iOS 12+ 和 Android Chrome）原生支持，无需前缀 - 父容器设
flex-direction: column，三栏用flex: 1均分剩余高度，底部固定区不参与均分 - 必须给 body 和 html 加
height: 100%，否则flex: 1无参照高度，这是最常漏的一步
底部固定区域必须用 position: sticky 而非 fixed
position: fixed 在手机端会脱离文档流，导致内容被遮挡、输入框弹起时定位错乱、iOS 键盘顶起后底部消失——这些不是 bug，是 fixed 的固有行为。
position: sticky 才是真正“粘在底部”的解法：它仍在文档流中，滚动时自动吸附到底部边界，且兼容性足够（iOS 15.4+、Android Chrome 98+ 都稳）。
- 底部容器加
position: sticky+bottom: 0+z-index: 10 - 它的父容器（即 flex 容器）必须有明确高度，比如
min-height: 100vh - 不要给 sticky 元素设
top或bottom同时存在，只留一个
三栏等高且不撑开页面的关键是 overflow: hidden 配合 flex-shrink: 0
当某栏内容超长（比如长文本或图片），默认会撑开整个布局，底部被顶出视口。这不是内容问题，是 flex 默认允许收缩但没限制溢出。
- 中间主内容区加
overflow-y: auto（滚动仅限该区域） - 顶部栏和底部栏加
flex-shrink: 0，防止被压缩变形 - 整个 flex 容器加
overflow: hidden，避免内部滚动条触发外层滚动 - 如果用
vh单位，注意 iOS Safari 的地址栏隐藏/显示会动态改变vh值，所以优先用100%+min-height: 100vh组合
真机调试时最常踩的坑是 viewport 设置不全
写完布局发现 iPhone 上缩放异常、底部被切掉、左右滑动——八成是 meta viewport 缺参数。
- 必须写全：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 少
maximum-scale=1.0或user-scalable=no，iOS 双击放大后布局就崩 - 不要用
shrink-to-fit=yes（已废弃），Safari 15+ 会忽略 - 安卓部分厂商浏览器（如华为、小米）对
viewport解析更严格，缺一不可
<style>
html, body { height: 100%; margin: 0; }
.container { display: flex; flex-direction: column; min-height: 100vh; overflow: hidden; }
.header, .footer { flex-shrink: 0; }
.main { flex: 1; overflow-y: auto; }
.footer { position: sticky; bottom: 0; z-index: 10; }
</style>
复杂点不在布局本身，而在你是否意识到：手机端没有“绝对固定”这回事，只有“视觉固定”和“行为固定”的取舍。漏掉任意一个约束条件，都会在某个机型上突然失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
