很多时候比如登录和注册页面，又或者是列表页面数据很少的情况下，我们是不希望底部footer跑到屏幕上方去的，而是希望固定在底部，但是当内容足够一屏幕时候，底部继续随着信息流往下走，当前案例代码由QQ群：610145056网友提供，亲测确实有效。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } body, html { height: 100%; } .box { min-height: 100%; position: relative; } header { width: 100%; height: 60px; background: #334455; } .section { padding-bottom: 110px; /* height:100px; */ background: #ccc; } .footer { height: 50px; background: #333; position: absolute; bottom: 0; width: 100%; } </style> </head> <body> <div class="box"> <header> 头部 </header> <div class="section"> 正文区域 </div> <div class="footer"> 底部 </div> </div> </body> </html> |
本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com
共 0 条评论关于"页面不满一屏footer固定在底部"
最新评论