footer贴底需设html/body高度为100%、外层容器flex列布局且min-height:100vh、主内容区flex:1；内容过长时main加overflow-y:auto；移动端用100dvh或JS适配；IE11需显式flex:1 0 auto并加-ms-前缀。
footer始终贴底需要同时满足两个条件
单纯用 position: fixed 会导致 footer 覆盖内容，而只设 margin-top: auto 在内容不足时又无法撑开；真正可靠的方案是：让主体容器具备最小高度（占满视口），再用 flex 的自动分配空间能力把 footer “推”到底部。
-
html和body必须设height: 100%，否则min-height: 100vh在子元素上可能无效 - 外层容器（如
.wrapper）需设display: flex; flex-direction: column;，且min-height: 100vh - 主内容区（
main或.content）加flex: 1，它会吸收剩余空间，把 footer 挤到最下方
flex 布局中 footer 被内容顶出屏幕怎么办
常见于内容过长时 footer 被挤出视口底部——这不是 bug，而是 flex: 1 让主内容区无限制拉伸导致的。解决关键是控制内容区行为：
- 给
main加overflow-y: auto，让它在超出时滚动，而不是撑高父容器 - 避免给
main设固定height或max-height，这会破坏 flex 的自适应逻辑 - 如果必须限制高度，用
flex-basis配合flex-grow: 1和flex-shrink: 1更稳妥
min-height: 100vh 和 height: 100vh 的区别必须分清
height: 100vh 是强制等高，一旦内容超长，footer 就会被推出可视区；min-height: 100vh 才是正确选择——它保证“至少一屏”，但允许更高。
- 移动端 Safari 对
vh单位有兼容问题（地址栏收放时值会变），可临时用min-height: 100dvh替代（支持 Chrome 105+/Safari 16.4+） - 老版本 iOS 需回退方案：用 JS 动态设置
style.minHeight = window.innerHeight + 'px'，并在resize时更新 - 不要在
body上直接设min-height，它不参与 flex 布局，应作用于 flex 容器本身
IE11 下 flex footer 布局失效的补救点
IE11 对 flex: 1 解析不稳定，尤其在嵌套 flex 或存在 min-height 时容易塌陷。关键修复项：
立即学习“前端免费学习笔记（深入）”；
- 给主内容区显式声明
flex: 1 0 auto（IE 对简写flex: 1支持差） - 确保父容器有明确
display: -ms-flexbox和-ms-flex-direction: column - footer 加
margin-top: auto作为降级手段（IE11 支持这个，且与 flex 共存不冲突）
html 和 body 的高度继承链，以及移动端 vh 的动态变化——这两个点不处理，再标准的 flex 写法也会在特定设备上失灵。 
