固定底部布局分沉底（如页脚）和固定（如操作栏）两类：沉底用flex:1+min-height:100vh实现，固定用position:fixed+padding-bottom防遮挡，二者不可混用。
固定底部布局分两种场景：一种是页脚（footer）随内容自然沉底（内容少时在视口底、内容多时紧贴内容尾），另一种是操作栏（如移动端导航、订阅按钮）始终悬浮在视口最下方、不随滚动消失。二者技术路径完全不同，混用会导致遮挡、错位或响应失效。
用 flex: 1 让 footer 自动沉底（推荐）
这不是“固定”，而是让主体区域占满剩余空间，把 footer 挤到底部——语义正确、不遮内容、响应友好。
-
html和body必须设min-height: 100vh（不是height: 100vh），否则短页面下flex: 1没空间可分 -
body加display: flex; flex-direction: column，顺序必须是header→main→footer -
main设flex: 1，它会自动吃掉所有剩余高度；footer不需要任何定位、margin-top: auto或固定高度 - 如果
header或footer高度不固定（比如字号随 viewport 变化），flex: 1依然可靠；而margin-top: auto在 IE11 下有兼容问题
用 position: fixed 做悬浮操作栏（仅限导航/按钮类）
这是真正“固定在视口底部”的唯一可靠方式，但只适用于脱离文档流、始终可见的 UI 元素，比如移动端底部导航条。
- 必须给
body加padding-bottom，值至少等于操作栏高度（如padding-bottom: 56px），否则内容会被遮住 - 操作栏本身要写全三件套：
position: fixed; bottom: 0; left: 0; right: 0，缺一不可 - 避免在该元素内部放
input或textarea—— iOS Safari 键盘弹出后容易错位 -
z-index: 999足够，别用99999，否则和弹窗层级冲突 - 高度建议用固定值（如
56px），不用100vh或百分比，否则 Safari 地址栏收放时会跳变
为什么 position: absolute + bottom: 0 总是失效
常见于想把按钮钉在卡片或表单底部却用了绝对定位——它看似简单，实则埋坑最多。
- 父容器没设
position: relative，absolute元素会往上找最近的定位祖先，可能跑到html根节点去，位置完全失控 - 绝对定位脱离文档流，父容器高度会塌陷，导致卡片/表单在小屏下无法自适应高度
- 移动端多列布局堆叠为单列时，按钮会悬在上层内容末尾，而非整个容器视觉底部
- 响应式断点切换时，需反复调整
top/bottom值，维护成本高
justify-content: space-between 固定卡片内按钮到底部
这是卡片（.card）这类局部容器的最优解，不依赖全局布局，也不脱离文档流。
- 父容器（
.card）设display: flex; flex-direction: column; justify-content: space-between - 结构必须明确分三块：
header（标题）、main（正文）、footer（按钮），不能把按钮直接塞进main里 - 容器要有高度约束，推荐用
min-height: 320px而非固定height，兼顾弹性与对齐 -
.card-header和.card-footer建议加flex-shrink: 0，防止被压缩变形
真正麻烦的不是代码怎么写，而是没分清“沉底”和“固定”的本质区别：前者是布局逻辑，后者是定位行为。选错方案，后面所有调试都是在补漏洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
