使用Flexbox可使footer固定在页面底部。首先设置html和body高度为100%，容器使用flex布局，主内容区域flex:1撑开，footer自然置于底部；或用绝对定位，容器min-height:100vh，footer设为position:absolute;bottom:0。推荐Flexbox方案，结构清晰且适配性强。
当页面内容较少时，footer 往往无法固定在页面最底部，影响整体视觉效果。通过 CSS 可以轻松实现 footer 始终位于视口底部的效果，常见方法有使用 Flexbox 和绝对定位两种。
使用 Flexbox 实现（推荐）
这是现代布局中最常用且兼容性良好的方式，适合整体页面结构的控制。
确保 html 和 body 高度占满视口，并将主容器设为 flex 布局：
html, body { height: 100%; margin: 0; padding: 0;}.container {display: flex;flex-direction: column;min-height: 100vh; / 最小高度为视口高度 /}
.content {flex: 1; / 主内容区域自动撑开 /}
footer {background-color: #333;color: white;text-align: center;padding: 20px;}
HTML 结构示例：
立即学习“前端免费学习笔记（深入）”；
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情
页面主要内容
使用绝对定位（适用于简单场景）
如果页面结构较简单，也可以用绝对定位将 footer 固定在底部。
关键点是让父容器最小高度为视口高度，footer 使用绝对定位贴底：
html, body { margin: 0; padding: 0;}.container {position: relative;min-height: 100vh;}
.content {padding: 20px;}
footer {position: absolute;bottom: 0;width: 100%;background-color: #333;color: white;text-align: center;padding: 20px 0;}
注意事项
实际应用中需注意以下几点：
确保 html 和 body 没有默认 margin 或已重置min-height 使用 100vh 而不是 100%，避免滚动条影响布局Flexbox 方法更灵活，支持响应式和动态内容绝对定位法在内容超过一屏时可能产生重叠，需额外处理
基本上就这些。推荐优先使用 Flexbox 方案，结构清晰，适配性强，维护成本低。
以上就是如何用css实现footer固定底部的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1002808.html
微信扫一扫 
支付宝扫一扫 
