2018年07月20日 唯品秀 2068次浏览
很多时候比如登录和注册页面，又或者是列表页面数据很少的情况下，我们是不希望底部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 | <!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; } .section{ padding-bottom:50px; height:200px; background:#ccc; } .footer{ height:50px; background:#333; position:absolute; bottom:0; width:100%; } </style> </head> <body> <div class="box"> <div class="section"></div> <div class="footer"></div> </div> </body> </html> |
「两年博客，如果觉得我的文章对您有用，请帮助本站成长」
谢谢你请我吃鸡腿*^_^*
支付宝
微信
唯品秀博客: weipxiu.com，一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，愿景：成为宇宙中最具有代表性的前端博客，期待您的参与 
虽然看得云里雾里，但是觉得牛弊的样子！学习了！
评：javascript如何判断数据是否是数组？应该在不久的将来会用到，先学习一波。
评：vue.js大转盘抽奖及其9宫格抽奖详解附代码前端这块你这位大神厉害了！！
评：gulp项目如何进行配置环境变量技术问题，看一眼，以后用的到的时候再来。
评：javascript中什么是伪数组？学习了，大佬多分享点这种拿来就能用的代码。
评：利用flex布局超简单实现瀑布流排版技术文章，支持一下。
评：通过插件让gulp同步执行任务列表
共有 0 条评论 - 页面不满一屏footer固定在底部