最可靠方案是flex布局：html、body设height:100%，body设display:flex和flex-direction:column，main设flex:1，footer自然沉底；须重置body margin:0，避免第三方样式干扰。
用 flex 布局实现 footer 粘底最可靠
纯 CSS 实现页脚黏底，display: flex + flex-direction: column 是当前兼容性好、逻辑清晰的首选方案。它不依赖固定高度、不触发奇怪的 margin 折叠，也不需要 JS 干预。
关键在于让 body 或根容器成为 flex 容器，并把主内容区域设为 flex: 1，自动撑满剩余空间，把 footer “顶” 到底部。
- 必须给
html和body设height: 100%，否则 flex 容器没高度基准 -
main或内容包裹容器需设flex: 1（等价于flex: 1 1 auto），不能只写flex: 1 0 auto - footer 不要设
margin-top: auto—— 在 flex column 里它会自然沉底，加了反而可能破坏对齐
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
footer {
/* 不需要额外定位 */
}position: absolute 会失效的典型场景
用 position: absolute + bottom: 0 看似简单，但极易在内容短于一屏时生效，内容长于一屏时把 footer 盖在内容上 —— 因为它脱离文档流，不再随内容增长而下移。
- 父容器必须是
position: relative，且高度要能反映视口或内容高度，否则 bottom 定位基准错乱 - 移动端 Safari 对
vh单位有滚动缩放问题，用100vh当容器高时，地址栏收起/展开会导致 footer 跳动 - 如果页面有动态加载内容（如无限滚动），
absolute方案无法自动响应高度变化
min-height: 100vh 的兼容性陷阱
min-height: 100vh 是常见尝试，但它在 iOS Safari 和部分 Android 浏览器中表现不稳定：地址栏显示/隐藏会改变 vh 值，导致布局抖动甚至 footer 悬空。
立即学习“前端免费学习笔记（深入）”；
- Chrome 89+ 支持
100dvh（dynamic viewport height），可替代100vh，但 Safari 16.4+ 才开始支持，旧版本仍 fallback 失败 - 若用
min-height: 100vh配合margin-top: auto，在 IE11 中完全不生效 —— flex 替代方案更稳妥 - 当页面有横向滚动条时，
vh不会自动减去滚动条宽度，可能导致右侧溢出
不要忽略 body 的 margin 和滚动行为
很多“粘不住”的问题其实和 body 默认样式有关。浏览器默认给 body 加了 margin，在 flex 布局下会直接撑开顶部空白，footer 看似没到底，其实是被挤下去了。
- 务必重置：
body { margin: 0; }，否则 flex 容器内部的 top/bottom 对齐会偏移 - 如果页面内有元素触发了
overflow: hidden或scroll-behavior: smooth，可能影响 flex 子项的尺寸计算顺序 - 某些 CMS 或 UI 框架（如 Bootstrap）会全局设置
body { padding-bottom: Xpx; }，这会让 footer 永远离底边 Xpx —— 查 DOM 样式比猜更有效
实际项目里最容易被忽略的，是 html 和 body 的高度链断裂，以及第三方样式对 body 的隐式覆盖。调 flex 布局前，先打开开发者工具检查这两层的高度是否真的传到了最外层。
