使用flexbox可轻松实现固定页脚布局，通过设置容器min-height: 100vh和flex-direction: column，结合内容区flex: 1撑开剩余空间，确保页脚始终贴于页面底部。
在初级网页项目中，实现一个始终固定在页面底部的页脚（Footer）是常见的布局需求。无论页面内容多寡，页脚下边缘都应紧贴浏览器窗口底部，这种效果称为“固定页脚”或“粘性页脚”。通过合理的CSS定位技巧，可以轻松实现这一效果。
使用Flexbox实现粘性页脚
Flexbox是最推荐的方式，结构清晰且兼容性良好。将页面整体容器设为flex布局，主体内容区域自动撑满剩余空间，从而把页脚“推”到最下方。
示例代码：
<div class="container"> <header>头部内容</header> <main class="content">主内容区</main> <footer>页脚</footer> </div>
CSS部分：
立即学习“前端免费学习笔记（深入）”；
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<p>.container {
display: flex;
flex-direction: column;
min-height: 100vh; /<em> 视口高度 </em>/
}</p><p>.content {
flex: 1; /<em> 占据所有可用空间 </em>/
}</p><p>footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px 0;
}</p>关键点在于 min-height: 100vh 和 flex: 1，确保内容不足时页脚仍能固定到底部。
使用绝对定位配合外边距
当不使用Flexbox时，可采用传统方法：给主体内容设置足够的下边距，再将页脚绝对定位到底部。
HTML结构类似，CSS如下：
body {
margin: 0;
position: relative;
min-height: 100vh;
}
<p>.content {
padding: 20px;
margin-bottom: 60px; /<em> 留出版脚高度的空间 </em>/
}</p><p>footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #333;
color: white;
text-align: center;
line-height: 60px;
}</p>这种方法依赖页脚的高度预知，若高度变化需同步调整margin值。
避免常见错误
初学者常遇到的问题包括页脚遮挡内容、未覆盖全宽或在短页面中无法到底。注意以下几点：
- 确保根元素（html）和body高度设为100%或100vh
- 页脚使用width: 100%或left/right控制横向铺满
- 避免在页脚上使用margin-top替代布局，容易导致空白
- 测试内容较少的页面是否依然正常显示
基本上就这些。对于大多数初级项目，用Flexbox方式最为简洁可靠，代码易读且维护方便。掌握这个技巧后，能快速搭建出专业感的基础页面结构。
