在网页排版中，当页面主体内容较少、无法填满整个浏览器视口时，footer往往会停留在内容结束的位置，而不是贴在视窗底部，这在视觉上显得头重脚轻。为了让footer在内容不足时仍然位于页面最底部，我们需要从布局结构入手，利用CSS控制容器的高度分配与排列方向。
一、使用Flexbox实现footer贴底
Flexbox是目前最直观也最易维护的方案。其核心思路是将整个页面包裹在一个纵向排列的flex容器中，并让该容器至少占满视口高度，然后将中间内容区域设为可伸缩，从而把footer挤到最下方。
具体做法是给html和body设置高度为100%，再使用一个外层容器（如.page-wrapper）作为flex容器，方向为column，最小高度为100vh。中间主体使用flex: 1来吸收多余空间。这样无论内容多寡，footer都会紧贴底部。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Flexbox Footer Demo</title>
<style>
html, body {
margin: 0;
height: 100%;
}
.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
background: #f0f0f0;
padding: 20px;
}
.content {
flex: 1;
padding: 20px;
}
.footer {
background: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="page-wrapper">
<header class="header">网站头部</header>
<main class="content">
<p>这里是页面内容，内容较少时footer依然在底部。</p>
</main>
<footer class="footer">版权所有</footer>
</div>
</body>
</html>
这种方式的优点在于语义清晰、兼容性好（支持IE10及以上），并且不需要知道footer的具体高度。缺点是如果项目中已经存在复杂的浮动或定位结构，需要适当调整容器层级。
二、使用Grid布局实现
CSS Grid同样能优雅地解决这个问题。我们可以将页面划分为三行：头部、内容、底部，并令内容行自动填充剩余空间。
通过grid-template-rows: auto 1fr auto;定义行高规则，其中1fr代表剩余空间分配单位，footer所在行设为auto即可自然落底。下面给出一个完整示例：
body {
margin: 0;
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
.header { background: #eef; padding: 20px; }
.content { padding: 20px; }
.footer { background: #333; color: #fff; padding: 20px; }
Grid方案代码更精简，尤其适合整体页面框架的搭建。不过在非常旧的设备上兼容性不如flexbox，但现代浏览器均已支持。
三、传统margin负值方案
在flex与grid尚未普及时，开发者常采用包裹层加margin负值的技巧：将footer放在内容包裹层之外，内容层设置底部内边距等于footer高度，再用负margin把footer拉回文档流。
该方案需要固定footer高度，不够灵活，且容易在动态内容下出现计算偏差，因此仅作原理了解，新项目推荐前两种。
<div class="content">页面内容</div> <footer class="footer">底部</footer>
综上所述，使用flexbox或grid都能以少量代码实现内容不足时footer置底，选择哪一种取决于项目兼容性要求与团队习惯。