底部固定布局不能仅用position: fixed因会脱离文档流导致遮挡，需用flex布局：父容器min-height: 100vh、display: flex、flex-direction: column，主内容区设flex: 1 0 auto，底部保持默认不伸缩。
底部固定布局为什么不能只靠 position: fixed
因为 position: fixed 会让元素脱离文档流，上面的内容会“看不见”底部高度，导致内容被遮挡或留白错位。真要让底部停在视口底边、同时主体内容自动撑开（比如填满剩余空间），必须用 flex 布局的流式控制能力。
核心逻辑是：父容器设为 display: flex + flex-direction: column，让子元素垂直排列；再给主内容区加 flex-grow: 1，它就会吃掉所有剩余空间，把底部“顶”到最下方。
常见错误现象：height: 100vh 硬撑 + margin-bottom 模拟底部 → 滚动条异常、内容溢出时底部悬空；或者忘了设 min-height: 100vh，导致短内容下底部上浮。
- 父容器必须有明确高度来源，推荐
min-height: 100vh（不是height: 100vh，否则内容超长时无法滚动） -
flex-direction: column是前提，否则flex-grow在水平方向起效，压不住底部 - 底部元素不需要设
margin-top: auto或其他 hack，flex-grow在主体上就足够
Flex 布局中 flex-grow 的实际行为
flex-grow 不是“占满剩余空间”的魔法开关，而是按比例分配**剩余自由空间**。如果只有主内容区设了 flex-grow: 1，它就拿走全部剩余空间；但如果头部、底部也设了 flex-grow，就会按数值比例分——这点常被忽略，导致底部被压缩。
使用场景：登录页（顶部 logo + 中间表单 + 底部版权）、后台框架（顶部导航 + 左侧菜单 + 主内容 + 底部状态栏）。
- 主内容区推荐写法：
flex: 1 0 auto（等价于flex-grow: 1+flex-shrink: 0+flex-basis: auto），避免内容超长时被压缩 - 头部和底部保持默认
flex: 0 0 auto，即不伸缩、按内容高度自然撑开 - 不要给底部设
flex-grow: 0—— 它本来就不该伸缩，显式声明反而容易误导后续维护
兼容性与移动端适配要注意什么
老版 Safari（iOS 9–12）对 flex: 1 在 column 下的支持有 bug，可能让主内容区高度为 0；Android 4.4 WebView 也有类似问题。这不是写法错，是渲染引擎缺陷。
性能影响很小，但若页面内嵌了大量滚动区域（如 overflow-y: auto 的卡片列表），需确保这些子容器不干扰外层 flex 高度计算——它们应设 max-height 而非 height，否则会破坏 flex-grow 的空间分配。
- 兼容方案：对 iOS height: 0 +
flex-grow: 1的 wrapper，或用margin-top: auto代替（仅用于底部固定，不撑内容） - 移动端键盘弹出时，
vh会失真（Safari 尤其明显），此时min-height: 100dvh更可靠（支持较新浏览器） - 避免在 flex 容器上同时设
padding和box-sizing: border-box外的值，否则 Safari 可能误算剩余空间
为什么 align-items 和 justify-content 很少需要动
这两个属性控制的是 flex 项目在交叉轴/主轴上的对齐，而底部固定本质是空间分配问题，不是对齐问题。乱设反而容易让内容居中偏移、或在小屏下换行错乱。
典型误操作：给 flex 容器加 justify-content: space-between，以为能“推”底部下去——结果是头部和底部被拉开，中间空白，主内容区根本没拿到生长权。
- 保持默认
justify-content: flex-start（垂直 column 下就是从上到下排列） - 除非整个页面要水平居中（比如窄版表单），否则别碰
align-items - 如果底部文字需要右对齐，直接在底部元素内部用
text-align: right，不要动容器的justify-content
最易被忽略的一点：flex 容器的父级如果有 overflow: hidden，且子元素用了 flex-grow，在某些安卓 WebView 中会导致主内容区不可滚动。检查 DOM 结构时，得一层层确认 overflow 设置是否“意外截断”了 flex 的空间计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
