1. 现象描述 (The Problem)
在开发 H5 或 Web 页面时，经常遇到以下两种尴尬场景：
- 场景 A（内容过短） ：当页面内容（Content）很少，不足以撑满屏幕高度时，Footer 会“浮”在屏幕中间，底部留出一大片难看的空白。
- 场景 B（内容过长） ：当页面内容很多时，Footer 应该被推到页面最底部，需要滚动到底部才能看到。
我们需要的效果是：
无论内容长短，Footer 永远在视口的最底部，或者内容的下方（如果内容超出一屏）。 这就是 Sticky Footer。
2. 原理解析 (The Principle)
在 Flexbox 普及之前，我们通常用负 margin 或绝对定位（ position: absolute ）来 hack，但兼容性差且容易覆盖内容。
现在最现代、最优雅的方案是使用 Flexbox 布局。
核心三步走：
- 容器定高：将最外层容器（Wrapper）设置为 Flex 容器，方向为列（Column），并强制最小高度为视口高度（ min-height: 100vh ）。这保证了页面至少有一屏高。
- 弹性布局：设置 display: flex; flex-direction: column; 。
- 撑开剩余空间：
- 方法一（推荐） ：给中间的内容区域（Content）设置 flex: 1 。这表示“自动占据剩余的所有空间”。当内容短时，它会自动伸长把 Footer 顶到底部；当内容长时，它按实际高度渲染。
- 方法二（我们在代码中用的） ：给 Footer 设置 margin-top: auto 。在 Flex 容器中，自动边距会吸收剩余空间，把元素推到另一端。
3. 代码实战 Demo (The Solution)
这是一个最小化的 HTML/CSS 演示，您可以复制保存为 .html 文件直接运行查看效果。
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Footer Demo</title>
<style>
/* 1. 全局重置，防止默认边距干扰 */
body { margin: 0; padding: 0; font-family: sans-serif; }
/* === [核心布局代码 Start] === */
/* 容器：设为 Flex 列布局，且至少占满一屏 */
.app-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* 顶部 Header */
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
/* 中间内容区：关键点！ */
main {
/* flex: 1 让它自动伸缩，占据除去 Header 和 Footer 之外的所有剩余空间 */
flex: 1;
background-color: #f0f0f0;
padding: 20px;
}
/* 底部 Footer */
footer {
background-color: #70b62c; /* 品牌绿 */
color: white;
padding: 20px;
text-align: center;
}
/* === [核心布局代码 End] === */
/* 仅用于演示的按钮样式 */
button { padding: 10px 20px; cursor: pointer; font-size: 16px; margin-top: 20px;}
</style>
</head>
<body>
<div class="app-container">
<header>
我是 Header
</header>
<main id="content">
<h2>我是主要内容区域</h2>
<p>当前内容较少，你看 Footer 依然在最底部，没有浮上来。</p>
<p>你可以点击下面按钮增加内容测试：</p>
<button onclick="addContent()">增加内容（模拟长页面）</button>
<button onclick="resetContent()">重置内容（模拟短页面）</button>
<div id="extra-text"></div>
</main>
<footer>
我是 Footer (Sticky Layout)
<br>
无论内容多少，我都在底部
</footer>
</div>
<script>
function addContent() {
const div = document.getElementById('extra-text');
let html = '';
for(let i=0; i<20; i++) {
html += '<p>这是一段很长的测试内容，用来撑开页面高度... ' + i + '</p>';
}
div.innerHTML = html;
}
function resetContent() {
document.getElementById('extra-text').innerHTML = '';
}
</script>
</body>
</html>
Plain Text
4. 为什么不用 position: fixed ?
很多初学者会把 Footer 设为 position: fixed; bottom: 0; 。
- 缺点：这是固定定位。Footer 会永远悬浮在屏幕下方，像贴了一块膏药。如果页面内容很长，内容会被这块膏药挡住，导致最底下的文字看不见。
- Sticky Footer 优点：它是流式布局。内容短时它在底部；内容长时，它在内容的下面，不会遮挡任何信息。
一句话总结：
容器 min-height: 100vh + Flex 布局，配合内容区 flex: 1，是目前实现 Sticky Footer 最标准、兼容性最好的方案。
