使用 Flexbox 布局可实现底部固定页脚，通过设置容器 min-height: 100vh 和 display: flex，主内容区 flex: 1 自动撑开，页脚自然置于底部，兼容性好且简洁高效。
如何用 CSS 实现底部固定页脚
实现一个始终固定在页面底部的页脚，常见于网页内容较短时，页脚仍能保持在视窗最下方。可以通过多种方式实现，以下是几种实用且兼容性较好的方法。
1. 使用 Flexbox 布局（推荐）
Flexbox 是目前最简洁、高效的实现方式。通过将页面容器设为 flex 容器，并让主内容区域自动撑满剩余空间，页脚自然被“推”到底部。
HTML 结构：
立即学习“前端免费学习笔记（深入）”；
页面主要内容
CSS 样式：
html, body { height: 100%; margin: 0;}.container {min-height: 100vh;display: flex;flex-direction: column;}
.content {flex: 1;}
.footer {background-color: #333;color: white;text-align: center;padding: 1rem;}
说明：min-height: 100vh 确保容器至少占满视口高度，flex: 1 让 content 区域自动填充可用空间，footer 因此被固定在底部。
闪念贝壳
闪念贝壳是一款AI 驱动的智能语音笔记，随时随地用语音记录你的每一个想法。
218 查看详情
2. 使用绝对定位 + 外边距
适用于不使用 Flex 的场景，通过给主体内容设置下边距，预留出页脚位置。
CSS 示例：
html, body { margin: 0; padding: 0;}.content {min-height: 100vh;margin-bottom: 60px; / 页脚高度 /}
.footer {position: absolute;bottom: 0;width: 100%;height: 60px;background-color: #333;color: white;text-align: center;line-height: 60px;}
注意：必须设置 html/body 无 margin，否则会影响高度计算；同时确保 .content 至少占满视口。
3. 使用 Grid 布局
Grid 提供了另一种现代布局方案，结构清晰。
.container { display: grid; grid-template-rows: 1fr auto; min-height: 100vh;}.content {grid-row: 1;}
.footer {grid-row: 2;background-color: #333;color: white;text-align: center;padding: 1rem;}
grid-template-rows: 1fr auto 表示第一行占满剩余空间，第二行（页脚）按内容高度显示。
基本上就这些。推荐优先使用 Flexbox 方案，兼容性好、代码简洁，适合大多数项目需求。关键是理解容器高度和内容伸缩机制，避免页脚遮挡内容或提前浮动。
以上就是如何用css实现底部固定页脚的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/975717.html
微信扫一扫 
支付宝扫一扫 
