在 ui 切图过程中，页面往往由三个部分组成，头部、内容和底部。当页面的内容高度不够撑满屏幕，底部（footer）就跟着内容浮动上来了，小屏幕由于高度有限看不出来异常，但如果是大屏的话，底部下面变会多出很多空白，非常影响美观。
方案 1：flex-box
头部使用 position: sticky; 吸顶，再使用盒子（ main ）来包住内容（ container > content ）和底部（ footer ），这个盒子设置最小高度为除头部外的剩余屏幕高度： min-height: calc(100vh – 50px); ，盒子里面使用弹性布局（ flex: 1 1 auto; ）让内容区域自动撑开，而底部保持不变（ flex: 0 0 auto; ），这样就有了 内容不够时底部自动吸底，内容足够时底部自动下移 的效果。
示例：
<html> <head> <title>css 实现底部（footer）贴底 - 方案 1：flex-box</title> <style> body { margin: 0; } header { height: 50px; background: #20c997; position: sticky; top: 0; } main { display: flex; flex-flow: column nowrap; min-height: calc(100vh - 50px); } 屈原的古诗一首 .container { flex: 1 1 auto; } .content { background: #0d6efmba是什么学历d; } footer { flex: 0 0 auto; back运动与静止ground: #fd7e14; } </style> </head> <body> <!--头部--> <header> header </header> <main> <div class="container"> <!--内容--> <div class="content"> content </di遇见你是我的幸福v> </div> <!--底部--> <footer> footer </footer> </main> </body></html&g珍珠泉pptt;在线演示： https://codepen.io/mazeyqian/pen/rneymdg
优点：底部高度可自由撑开。
缺点：低版本浏览器有兼容性（flex-box & calc）问题。
方案 2：底部负距离 margin
内容区设置最小高度铺满页面，然后底部设置等高的负距离 margin 。
示例：
<html> <head> <title>css 实现底部（footer）贴底 - 方案 2：底部负距离 `margin`</title> <style> body { margin: 0; } header { height: 50px; background: #20c997; position: sticky; top: 0; } .container { min-height: calc(100vh - 50px); } .content { background: #0d6efd; } footer { height: 50px; margin-top: -50px; background: #fd7e14; } </style> </head> <body> <!--头部--> <header> header </header> <div class="container"> <!--内容--> <div class="content"> content </div> </div> <!--底部--> <footer> footer </footer> </body></html>在线演示： https://codepen.io/mazeyqian/pen/eyzvjzr
到此这篇关于css 实现内容高度不够的时候底部(footer)自动贴底的文章就介绍到这了,更多相关css 底部自动贴底内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！
本文发布于:2023-04-03 19:40:35，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/34f6bc117acb7fdb846cc4ed913d6f02.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：CSS 实现内容高度不够的时候底部(footer)自动贴底.doc
本文 PDF 下载地址：CSS 实现内容高度不够的时候底部(footer)自动贴底.pdf
| 留言与评论（共有 0 条评论） |
