footer部分,当页面主题内容不满一屏时,始终位于页面底部
比如上面这种情况,footer部分本来应该位于最底部,但是main内容太少导致连在一起,影响美观
解决方案:
给footer加上margin-top:负值 值的大小为footer的高度
写了个小demo代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >Title</ title > < meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0;"/> </ head > < body style="padding:0;margin:0;"> < div style="width:202px;height:202px;border:1px solid #ccc;background: #fff;overflow-y:scroll "> < div style="width:100%;min-height:100%;"> < div style=" padding-bottom:40px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, assumenda culpa in maiores nesciunt placeat sequi. Libero neque quaerat quam unde veritatis voluptates. Commodi fugit impedit perspiciatis quam sed sit. </ div > </ div > < div style="width:100%; height:40px; background: red; color:#fff; margin-top:-40px">footer部分</ div > </ div > </ body > </ html > |
注意div的嵌套关系,以及main部分的padding-bottom值(为footer留出空档大小)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步