footer悬在页面中间的根本原因是父容器高度不足，应设html/body{height:100%}，.wrapper用min-height:100vh+flex column，.main加flex:1撑满剩余空间，footer保持自然流。
为什么 footer 总是悬在页面中间？
常见现象是：内容少时 footer 不贴底，留出大片空白；内容多时又正常。根本原因不是 footer 本身有问题，而是父容器（通常是 body 或某个包裹层）高度不足，导致 footer 只能按内容自然流式布局。
用 min-height: 100vh 配合 flex 布局最稳
这是目前兼容性好、逻辑清晰、不易踩坑的方案。关键不是给 footer 加定位，而是让主体区域「撑满视口最小高度」，再用 flex 控制子元素排列顺序和空间分配。
- 必须给根容器（如
html和body）设height: 100%，否则100vh在某些场景下会失效 - 主容器（比如
.wrapper）设display: flex; flex-direction: column; - 主体内容区（如
.main）加flex: 1，它会自动吃掉剩余空间，把footer「顶」到底部 -
footer不需要margin-top: auto或position: absolute—— 那些容易破坏文档流或响应式表现
html, body {
height: 100%;
}
<p>.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}</p><p>.main {
flex: 1;
}</p><p>footer {
/<em> 不加 height，不加 position，保持自然流 </em>/
}遇到滚动条错位或底部多出空白怎么办？
典型诱因是：父容器有默认 margin、padding，或 footer 自身有外边距/内边距没重置。另外，min-height: 100vh 在 iOS Safari 中可能因地址栏缩放导致计算偏差。
- 强制清除
body的默认margin：body { margin: 0; } - 检查所有祖先元素是否意外设置了
padding-bottom或margin-bottom - 如果
footer有背景色但底部露出白边，大概率是html或body没设height: 100% - iOS 兼容可加一行兜底：
min-height: -webkit-fill-available;
不用 flex 的替代方案：calc() + min-height
适合老项目不能改结构，或需支持 IE10+ 的场景。核心思路是：让主体区域最小高度 = 视口高度 − 头部高度 − 页脚高度。
立即学习“前端免费学习笔记（深入）”；
- 必须提前知道
header和footer的固定高度（比如都是60px） - 主体区写成：
min-height: calc(100vh - 120px); - 缺点明显：高度写死，响应式差；一旦页脚用
em或百分比，就难维护 - 不推荐作为首选，仅作兼容补救
真正卡住的往往不是技术选型，而是忘了重置 body margin，或者没给 html 设 height: 100% —— 这两点漏掉，再标准的 flex 方案也会失效。
