在网页开发中，我们常希望页面的底部区域比如版权信息或操作栏，无论正文内容多还是少，都始终贴在视口或文档的最底部。如果只用普通文档流，内容不足时底部就会停在中间。下面介绍几种实用方案。
使用 Flexbox 实现粘性底部
最推荐的方式是利用弹性盒模型。将 body 或最外层容器设为纵向 flex 容器，并占满视口高度，中间内容区使用 flex:1 自动伸展，底部盒子自然被推到最下。
/* 让 html 和 body 占满整个窗口高度 */
html, body {
height: 100%;
margin: 0;
}
/* 外层容器使用 flex 纵向排列 */
body {
display: flex;
flex-direction: column;
}
/* 中间内容区域自动撑开 */
.content {
flex: 1 0 auto;
}
/* 底部盒子 */
.footer {
flex-shrink: 0;
background: #f2f2f2;
padding: 20px;
text-align: center;
}
对应 HTML 结构如下：
<body>
<div class="content">
<p>这里是页面正文，高度可多可少。</p>
</div>
<footer class="footer">始终在底部的底部栏</footer>
</body>
使用 Grid 布局实现
CSS Grid 也能轻松做到。将容器定义为三行，其中内容行设为 1fr 占满剩余空间。
body {
margin: 0;
min-height: 100vh;
display: grid;
grid-template-rows: 1fr auto;
}
.content {
/* 占据第一行自动伸展 */
}
.footer {
background: #eee;
padding: 15px;
}
使用固定定位的局限
如果采用 position: fixed 把底部固定在视口底端，它不会随文档滚动，且会覆盖内容，需要给内容加底部内边距。这种方式适合移动端工具栏，不适合传统页脚。
.footer-fixed {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background: #333;
color: #fff;
padding: 10px;
}
/* 防止内容被挡住 */
body {
padding-bottom: 50px;
}
方案对比
| 方案 | 兼容性 | 是否随文档滚动 | 适用场景 |
|---|---|---|---|
| Flexbox | 现代浏览器均支持 | 是 | 常规网页底部 |
| Grid | 较新浏览器 | 是 | 布局复杂的页面 |
| Fixed | 全部浏览器 | 否 | 悬浮操作栏 |
小结
当内容高度变化时，使用 flex-direction: column 配合 flex:1 是最简单稳妥的让 CSS 盒子始终保持在页面底部的办法。理解这些布局特性，就能从容应对各种页面结构。
CSSsticky_footerflexbox修改时间：2026-07-26 17:54:19