页脚贴不住底部的最优解是用flex布局配合margin-top: auto。将html和body设为height: 100%，body设为display: flex、flex-direction: column，main设flex: 1，footer设margin-top: auto即可。
页脚贴不住底部，通常是因为页面内容太短，导致页脚悬浮在中间。用 flex 布局配合 margin-top: auto 是最简洁可靠的解法，不需要计算高度、不依赖绝对定位，兼容性也好（IE10+ 支持）。
让 body 成为 flex 容器
把整个页面的根容器（通常是 body 或一个外层 div）设为 display: flex，方向设为列布局，并允许子元素沿主轴（垂直方向）伸展：
- 给
html和body设height: 100%，确保高度撑满视口 - 给
body加display: flex; flex-direction: column; - 主体内容区域（如
main）设flex: 1，让它自动填满剩余空间
页脚用 margin-top: auto 推到底部
在 flex 列布局中，margin-top: auto 会让该元素尽可能远离上一个兄弟元素，也就是被“挤”到容器底部：
- 页脚（
footer）不需要设固定高度，也不需要position: absolute - 直接加
margin-top: auto即可——它会吸收主体内容之后的所有剩余空间 - 如果页脚有固定高度，不影响效果；内容变多时，页脚也会随内容自然下移
结构示例（HTML + CSS）
关键代码如下，无需 JS，无副作用：
立即学习“前端免费学习笔记（深入）”；
<body> <header>顶部</header> <main>主要内容</main> <footer>底部版权</footer> </body>
CSS：
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
footer {
margin-top: auto;
}
常见踩坑提醒
这个方法看似简单，但几个细节容易出错：
- 别忘了
html, body { height: 100% }，否则 flex 容器没高度，flex: 1就不生效 - 确保
main是body的直接子元素，否则margin-top: auto不会跨层级起作用 - 如果用了重置样式（如 normalize.css），检查是否意外清除了
body的默认margin或display
基本上就这些。比 sticky footer、calc()、绝对定位都更直观稳定，现代项目推荐首选。
