粘性页脚布局是指当页面内容高度小于浏览器视口高度时，页脚固定在视口底部；当页面内容高度超过视口高度时，页脚跟随内容正常向下排列的布局效果。这种布局在官网、博客类页面中非常常见，能提升页面的整体观感。
实现原理
核心思路是利用CSS的flex布局让页面整体容器成为弹性容器，设置最小高度为100vh占满整个视口，然后让内容区域自动扩展填充剩余空间，这样页脚就会被挤到容器底部，实现粘性效果。
具体实现步骤
第一步：编写HTML5基础结构
首先搭建包含头部、内容区、页脚的基础HTML结构，各部分使用语义化标签区分，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粘性页脚布局示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-container">
<header class="page-header">
<h1>网站头部</h1>
</header>
<main class="page-content">
<p>这里是页面主要内容区域</p>
<p>当内容较少时，页脚会固定在底部</p>
</main>
<footer class="page-footer">
<p>© 版权所有 粘性页脚示例</p>
</footer>
</div>
</body>
</html>
第二步：编写CSS样式代码
接下来编写对应的CSS样式，核心是对外层容器设置flex布局相关属性，代码如下：
/* 重置默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
}
/* 外层容器设置为flex布局，最小高度占满视口 */
.page-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* 头部样式 */
.page-header {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
/* 内容区域设置flex-grow为1，自动填充剩余空间 */
.page-content {
flex-grow: 1;
padding: 30px;
line-height: 1.6;
}
/* 页脚样式 */
.page-footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
第三步：测试布局效果
将上述HTML和CSS代码保存后，在浏览器中打开页面，尝试减少main标签内的内容，会发现页脚始终固定在视口底部；增加main内的内容让总高度超过视口高度，页脚会跟随内容向下排列，符合粘性页脚的预期效果。
注意事项
- 外层容器必须设置
min-height: 100vh而不是height: 100vh，否则当内容超过视口高度时会出现内容被截断的问题。 - 内容区域必须设置
flex-grow: 1，这个属性会让内容区域自动占据除头部和页脚之外的所有剩余空间，是页脚能被挤到底部的关键。 - 如果页面中存在其他全局样式，需要注意避免样式冲突，比如全局的
height: 100%设置可能会影响容器的高度计算。
兼容性说明
这种实现方式基于CSS flex布局，目前所有主流现代浏览器都支持该特性，包括Chrome、Firefox、Edge、Safari等，不需要添加浏览器前缀即可正常使用。如果需要兼容非常老旧的浏览器版本，可以考虑使用传统的绝对定位方案，但flex方案的实现成本更低，维护更方便。