本文介绍一种现代、可靠的 css 方案，通过 flexbox 布局实现真正的“粘性页脚”——无论内容多寡，页脚始终紧贴视口底部，且不遮挡内容、支持滚动，兼容各类设备。
本文介绍一种现代、可靠的 css 方案，通过 flexbox 布局实现真正的“粘性页脚”——无论内容多寡，页脚始终紧贴视口底部，且不遮挡内容、支持滚动，兼容各类设备。
要让页脚（<footer>）真正“粘”在页面最底部，而非简单地绝对定位（position: absolute），关键在于构建一个语义清晰、高度可控的文档流布局。position: absolute 虽能将元素钉在视口底端，但会脱离文档流，易导致内容被遮盖、响应式失效，且在内容不足时页脚悬空于中部——这并非真正的 Sticky Footer。
✅ 推荐方案：Flexbox 布局驱动的语义化结构
核心思路是将 <body> 设为垂直方向的 Flex 容器，内部按 header → main content → footer 顺序排列，并赋予主体区域（.content）弹性生长能力，从而自动撑满剩余空间：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Footer Demo</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* 关键：确保 body 至少占满整个视口高度 */
overflow-x: hidden;
}
header {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
font-size: 1.25rem;
}
.content {
flex: 1; /* 关键：占据所有剩余可用空间 */
padding: 1.5rem;
background-color: #f9f9f9;
}
footer {
background-color: #000;
color: #fff;
text-align: center;
padding: 1rem;
font-size: 0.875rem;
/* 无需 position: absolute —— Flex 已保证其位于底部 */
}
</style>
</head>
<body>
<header>网站头部</header>
<main class="content">
<h1>主要内容区域</h1>
<p>此处可包含任意长度的内容……</p>
<!-- 示例：添加足够高度以触发滚动 -->
<div style="height: 120vh; background: linear-gradient(to bottom, #eee, #ccc);"></div>
</main>
<footer>
<div class="footer-content">
<p>© 2023 All rights reserved | This website is made with ♥ by XXXXXX.</p>
</div>
</footer>
</body>
</html>? 关键要点说明：
- min-height: 100vh（非 height: 100vh）：确保页面内容少时页脚仍能到底部；内容多时允许自然滚动。
- .content { flex: 1 }：这是实现“撑满”的核心——它等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0，强制该区域吸收所有剩余空间。
- 语义化结构：使用 <header>、<main>、<footer> 符合 HTML5 标准，提升可访问性与 SEO。
- 移除 position: absolute：避免脱离文档流引发的重叠、响应错位等问题。
⚠️ 注意事项：
- 确保 <footer> 在 HTML 中位于 <body> 内且处于 DOM 流末端（即 </main> 之后、</body> 之前）；
- 若存在全局 margin 或 padding 干扰，建议统一用 * { margin: 0; padding: 0; } 重置；
- 在旧版浏览器（如 IE10 及以下）中需添加 -ms-flex 前缀，但现代项目通常无需兼容。
此方案简洁、健壮、无 JS 依赖，是当前实现 Sticky Footer 的最佳实践。
