答案：推荐使用Flexbox布局实现底部固定footer，通过设置容器display: flex、flex-direction: column和min-height: 100vh，内容区域flex: 1占据剩余空间，使footer始终位于底部；当不支持Flex时可采用绝对定位方案，父级设高并为内容区添加与footer等高的padding-bottom，避免内容遮挡。
要实现底部固定footer，也就是让footer始终停留在页面底部，当内容不足一屏时footer靠底，内容多时footer在内容后正常排列，可以通过几种CSS方法实现。下面介绍两种常用且兼容性好的方案。
方法一：使用 Flexbox 布局（推荐）
这是现代最简洁、最可靠的实现方式，适用于大多数布局场景。
HTML结构：
CSS样式：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-direction: column;
min-height: 100vh; /* 最小高度为视口高度 */
}
.content {
flex: 1; /* 占据剩余空间，把footer推到底部 */
}
说明：容器设为flex并纵向排列，最小高度占满视口，内容区域用 flex: 1 自动撑开，footer自然被推到最下方。
闪念贝壳
闪念贝壳是一款AI 驱动的智能语音笔记，随时随地用语音记录你的每一个想法。
218 查看详情 
方法二：使用绝对定位 + 外边距
适用于不支持Flex的旧环境，但需要额外处理内容遮挡问题。
CSS样式：
立即学习“前端免费学习笔记（深入）”；
body, html {
height: 100%;
}
.content {
padding-bottom: 60px; /* 预留footer高度的空间 */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}
注意：父容器必须有明确的高度（如100vh或设置html/body高度），并且给内容区域添加与footer等高的padding-bottom，防止内容被遮挡。
常见问题提醒
确保html和body没有默认margin影响布局footer高度尽量固定，便于计算预留空间移动端测试时注意键盘弹出对视口的影响
基本上就这些。推荐优先使用Flexbox方案，代码清晰，维护简单，兼容主流浏览器。绝对定位适合简单页面或需要兼容老版本IE的情况。选择哪种取决于你的项目需求和浏览器支持范围。
以上就是如何用css实现底部固定footer的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/984823.html
微信扫一扫 
支付宝扫一扫 
