footer上浮是因为主容器高度未撑满视口，应给wrapper设min-height: 100vh并配合display: flex、flex-direction: column及.main{flex: 1}使footer沉底。
footer 总是上浮是因为 body 高度没撑满视口
常见现象是页面内容少时，footer 紧贴内容下方，而不是固定在浏览器底部；滚动条都没出现，footer 就“飘”在中间。根本原因是：父容器（比如 body 或包裹容器）没有足够高度，导致 footer 只能按正常文档流定位，不会被“推”到底部。
用 min-height: 100vh 给主容器设最小视口高度
这是最直接、兼容性好（IE10+）、无需 JS 的方案。关键不是给 footer 加样式，而是确保它前面的主内容区至少占满整个视口。
-
vh是视口单位，100vh= 当前窗口高度 - 必须作用在
footer的直接父容器（常为.main或main元素），不能只设html或body - 要配合
display: flex+flex-direction: column才能让footer自动“沉底”
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.main {
flex: 1; / 占满剩余空间 /
}
footer {
/ 不需要设置 margin-top 或 position /
}
为什么不用 position: fixed 或 absolute
这类定位会让 footer 脱离文档流，容易覆盖内容、影响可访问性，且在内容超长时无法随页面滚动到底部——它会永远钉在视口底部，造成遮挡。
-
fixed：始终相对视口定位，不随滚动移动（错） -
absolute+bottom: 0：依赖父容器有定位上下文（position: relative），且父容器高度仍可能不足 - 两者都绕过布局逻辑，治标不治本
移动端或 Safari 下 100vh 失效怎么办
Safari（尤其 iOS）在地址栏展开/收起时会动态改变 vh 值，导致 footer 瞬间跳动。此时可改用 100dvh（dynamic viewport height），但需检查兼容性：
立即学习“前端免费学习笔记（深入）”；
-
100dvh是 CSS Level 5 新单位，Chrome 105+、Safari 16.4+ 支持 - 不支持时可降级回
100vh，用@supports切换 - 更稳妥的兜底：用 JS 监听
resize动态设min-height，但仅限复杂项目
@supports (height: 100dvh) {
.wrapper {
min-height: 100dvh;
}
}实际效果取决于你是否漏掉了 flex: 1 这个关键声明——它让主内容区域“吃掉”所有剩余空间，把 footer 挤到最底下。很多人写了 min-height 却忘了这行，结果还是上浮。
