粘性页脚指内容不足一屏时footer固定视口底部、内容足够长时自然位于内容末尾的布局效果；它通过flexbox实现，使body为column方向flex容器，main设flex:1占满剩余空间，footer用margin-top:auto后备，避免使用fixed或sticky导致脱离文档流。
什么是粘性页脚（Sticky Footer）
粘性页脚指当页面内容高度不足一屏时，footer 仍能固定在视口底部；内容足够长时，footer 则自然跟随内容之后、不遮挡主体。它不是靠 position: fixed 实现的“悬浮底栏”，而是真正参与文档流的布局行为。
用 Flexbox 实现最可靠的粘性页脚
HTML5 布局中，display: flex + flex-direction: column 是目前兼容性好、逻辑清晰、不易出错的方案。关键在于让 body 或根容器成为 flex 容器，并约束主内容区域撑满剩余空间。
常见错误现象：footer 悬浮在内容中间、随滚动消失、或在短内容下留白过大。
- 确保
html和body高度为100%，否则 flex 的min-height: 100vh会失效 - 把
body设为display: flex; flex-direction: column - 给
main（或内容包裹容器）设置flex: 1，它会自动占据剩余空间，把footer“顶”到底部 -
footer不需要设高度，但建议加margin-top: auto作为后备（某些旧版 Safari 对flex: 1解析不稳定）
为什么不用 position: sticky 或 fixed
position: sticky 对 footer 几乎无效——它的触发依赖父容器滚动，而页脚通常在文档末尾，没有“滚动后吸附”的场景。position: fixed 会让 footer 脱离文档流，导致内容被遮盖、打印样式错乱、无障碍阅读中断。
立即学习“前端免费学习笔记（深入）”；
使用场景差异：
-
position: fixed适合全局操作栏（如返回顶部按钮），不适合语义化footer -
position: sticky适合表格标题行、侧边导航锚点，不适用于页脚 - Flex 方案天然支持响应式，无需媒体查询干预
IE11 兼容性与 fallback 注意点
IE11 支持 Flexbox，但对 flex: 1 解析有偏差，尤其在嵌套 flex 容器中。若必须支持 IE11，建议：
- 避免在
body上直接设 flex，改用外层包裹header、main、footer- 给
main加flex: 1 0 auto（显式声明flex-basis）- 检查是否引入了
html5shiv，否则 IE9–10 中header/footer标签不被识别为块级元素- 禁用
margin-top: auto，改用margin-top: auto在 IE 中可能被忽略，可补align-self: flex-end到footer（需父容器是 flex）最容易被忽略的是：没重置
body默认margin，导致顶部/底部多出空白，视觉上破坏“粘性”效果。 - 给
