使用Flexbox可实现底部固定页脚，通过设置容器min-height:100vh和flex-direction:column，主体内容flex:1自动填充剩余空间，使页脚始终位于页面底部。
要实现一个底部固定页脚（即页脚始终固定在页面底部，即使内容不足一屏），可以通过几种 CSS 方法来完成。最常用且推荐的方式是使用 Flexbox 布局。下面详细介绍具体实现步骤。
1. 使用 Flexbox 实现底部固定页脚
这是现代、简洁且兼容性良好的方法，适用于大多数现代浏览器。
基本结构如下：
CSS 样式设置：
立即学习“前端免费学习笔记（深入）”；
音疯
音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。
146 查看详情 html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
padding: 20px;
}
.footer {
height: 60px;
background-color: #333;
color: white;
text-align: center;
line-height: 60px;
}
说明：
将 html 和 body 的高度设为 100%，确保容器能撑满视口。 min-height: 100vh 让容器至少占满整个屏幕高度。 通过 display: flex 和 flex-direction: column 设置垂直布局。 给主体内容区域设置 flex: 1，它会自动伸展填满剩余空间，从而把页脚“推”到页面底部。
2. 使用绝对定位（适用于简单场景）
如果页面结构简单，也可以用绝对定位实现。
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
position: relative;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background: #333;
color: #fff;
text-align: center;
line-height: 60px;
}
注意：这种方法需要确保主体内容不会遮挡页脚，可能需额外设置内边距或限制内容高度。
3. 常见问题与建议
避免使用固定像素高度限制主体内容，应让其自适应。 测试时尝试减少内容，确认页脚是否仍位于页面最底部。 移动端注意适配，可配合媒体查询调整页脚高度或样式。基本上就这些。推荐优先使用 Flexbox 方案，结构清晰，维护方便，兼容性也足够好。
以上就是如何用css制作底部固定页脚的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1055081.html
微信扫一扫 
支付宝扫一扫 
