在网页布局开发中，让页脚始终处于页面底部但又不使用固定定位是常见需求，这种布局通常被称为粘性页脚布局。它的核心逻辑是当页面内容高度不足时，页脚自动撑到视口底部，当内容高度超过视口时，页脚跟随内容自然下移，不会遮挡主体内容。
核心实现思路
要实现这种效果，最主流的方案是使用flexbox弹性布局，核心是通过设置容器的最小高度为视口高度，同时让主体内容区域自动占据剩余空间，这样页脚就会被自然推到容器底部。下面是具体的实现步骤和代码。
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-main">
<p>这里是页面的主体内容区域，当内容较少时，页脚会保持在视口底部。</p>
<p>可以自行添加更多内容测试页脚的下移效果。</p>
</main>
<footer class="page-footer">
<p>© 版权所有 页脚内容</p>
</footer>
</div>
</body>
</html>
CSS样式配置
接下来编写对应的CSS样式，核心是通过flexbox的相关属性实现布局效果，具体样式代码如下：
/* 重置默认边距，避免布局异常 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 页面容器设置为flex布局，方向为纵向，最小高度为视口高度 */
.page-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* 头部样式，固定高度即可 */
.page-header {
height: 60px;
background-color: #f0f0f0;
display: flex;
align-items: center;
padding: 0 20px;
}
/* 主体内容区域设置flex-grow为1，自动占据剩余空间 */
.page-main {
flex-grow: 1;
padding: 20px;
background-color: #ffffff;
}
/* 页脚样式，固定高度 */
.page-footer {
height: 80px;
background-color: #333333;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
关键属性说明
上述代码中几个核心属性的作用如下：
min-height: 100vh：设置页面容器的最小高度为视口高度的100%，保证容器至少占满整个屏幕，当内容不足时容器高度等于视口高度。display: flex和flex-direction: column：将容器设置为纵向排列的flex布局，子元素会按从上到下的顺序排列。flex-grow: 1：给主体内容区域设置这个属性，意思是当容器有剩余空间时，该区域会自动扩展占据所有剩余空间，从而把页脚推到容器底部。
效果验证
完成上述代码后，可以测试两种场景：
- 当
main区域的内容很少时，整个.page-container的高度是100vh，main会占据头部和页脚之外的所有空间，页脚会固定在视口底部。 - 当
main区域的内容很多，超过视口高度时，main会继续扩展高度，.page-container的高度会被内容撑开，页脚会跟随内容自然下移，不会出现固定定位遮挡内容的问题。
注意事项
在实际使用中需要注意几个细节：
- 不要给
.page-container设置固定的height属性，否则当内容超过固定高度时会出现溢出问题，必须使用min-height。 - 如果页面中存在其他全局样式，需要确认没有给
body或者html设置额外的边距或者高度限制，避免影响布局效果。 - 如果需要兼容非常老旧的浏览器（不支持flexbox），可以使用基于
position和负margin的替代方案，但flexbox方案目前已经是主流，兼容性足够覆盖绝大多数使用场景。
CSSflexboxmin-height页脚布局sticky_footer修改时间：2026-06-11 01:57:29