min-height: 100vh 不足因仅设最小高度而不强制子元素定位；需 html/body 设 height: 100% 并用 flex 布局，main 设 flex: 1 才能可靠撑开页脚到底部。
为什么 min-height: 100vh 常常不够用
直接设 html 或 body 的 min-height: 100vh 看似合理，但实际中页脚仍会悬浮——根本原因是：页面内容高度未撑满视口时，vh 只保证「最小」，不强制子元素（如页脚）被推到底部；若主内容区域没设置高度约束或未参与 flex 布局，页脚就只能按普通文档流定位。
常见错误现象：footer 在短内容页里浮在中间，或随内容增长突然跳到视口底部下方（因父容器未限制增长）。
- 确保
html和body都设height: 100%或min-height: 100vh，否则子级的百分比高度无效 -
vh是视口高度，不是可用布局高度；滚动条、地址栏缩放、iOS Safari 的动态视口变化都会影响实际值 - 如果用了
position: fixed或absolute定位页脚，它就彻底脱离文档流，无法响应内容高度变化
用 Flex 布局 + min-height 实现可靠贴底
最稳定的做法是让根容器（通常是 body）成为 flex 容器，主内容区设 flex: 1 占满剩余空间，从而把页脚「挤」到底部。这比纯 min-height 更可控，且天然适配响应式断点。
html, body {
height: 100%;
margin: 0;
}
<p>body {
display: flex;
flex-direction: column;
}</p><p>main {
flex: 1;
}</p><p>footer {
/<em> 不需要固定高度，但建议设 min-height 防止压缩 </em>/
min-height: 60px;
}关键点：
立即学习“前端免费学习笔记（深入）”；
-
html必须设height: 100%，否则body的height: 100%无参照 -
main用flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），才能真正吸收剩余空间 - 在媒体查询中可针对小屏调整
footer的min-height或字体大小，避免遮挡内容
响应式下需注意的兼容性细节
Flex 布局在现代浏览器中支持良好，但旧版 iOS Safari（
- 对
main添加flex-shrink: 0防止内容被过度压缩（尤其含图片或 iframe 时） - 为
footer加margin-top: auto替代flex: 1在某些 flex 版本中更稳定 - 若项目需支持 IE11，必须用
display: -ms-flexbox前缀，并避免flex: 1，改用-ms-flex: 1 - 不要依赖
vh计算页脚高度（如height: 10vh），iOS Safari 滚动时vh会动态变化，造成页脚跳动
当页脚内容动态变化时怎么保持贴底
页脚内嵌了折叠面板、加载状态或根据用户权限显示不同区块时，高度可能突变。此时仅靠初始 flex 布局可能失效，需监听高度变化并重排。
简单方案是给 footer 设 overflow: hidden 并配合 transition: height 0.2s ease，但更稳妥的是用 ResizeObserver 主动响应：
const footer = document.querySelector('footer');
const observer = new ResizeObserver(() => {
// 触发一次重排，确保 flex 容器重新计算
document.body.style.minHeight = 'auto';
document.body.offsetHeight; // 强制重排
document.body.style.minHeight = '100vh';
});
observer.observe(footer);不过多数场景下，只要结构正确（main 占满剩余空间），页脚自身高度变化不会破坏贴底逻辑——真正容易出问题的是页脚内部用了 position: absolute 或 transform，这会让它脱离 flex 轴向约束。
最常被忽略的一点：父容器如果有 padding-bottom 或 margin-bottom，会干扰 flex 分配，导致页脚上移。检查所有外层 wrapper 是否意外设置了 bottom 侧边距或内边距。
