一款经典的stick footer布局
有时候会有需求将footer固定到底部。文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾
第一步,设置子盒子的坐标、位置以及如果长度超过最低高度的的处理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | *{ text-align: center; margin: 0; } .wrapper{ position: fixed ; top: 0; left:0; width: 100%; height: 100%; overflow: auto; font-size: 20px; background: #00ff00; } |
第二步子盒子设置最小高度 给一个padding-bottom 等于footer高度 避免内容将footer遮盖
1 2 3 4 | .wrapper .content{ min-height: 100%; padding-bottom: 50px; } |
第三步footer的height和margin-top要相等 且清除浮动
1 2 3 4 5 6 7 8 9 10 11 | .wrapper .footer{ position: relative; width:100%; height: 50px; margin: -50px auto 0 auto; clear: both; text-align: center; background: black; color:white; line-height: 50px; } |
第四步,项目中使用
1 2 3 4 5 6 7 8 9 | <div class = "wrapper" > <div class = "content" > 这里是内容 </div> <div class = "footer" > 这里是footer的内容,固定在底部 </div> </div> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步