Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部。我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器的底部时,下面要讲的布局就是解决如何使元素粘住浏览器底部。
base.css
/*base style*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary{ margin:0; padding:0;} body{ font-family:"\5FAE\8F6F\96C5\9ED1","Microsoft Yahei","Arial"; color:#333; background-color:#fff; font-size:15px; background-image:url(about:blank); background-attachment:fixed; overflow-x:hidden;} a{ color:#06f; text-decoration:none;} a:hover{ color:#f60; text-decoration:none;} img{ border:none; vertical-align:middle; max-width: 100%;} i,em{ font-style:normal;} li{ list-style-type:none;} textarea{ resize:vertical;} input, select, textarea{ font-family:"\5FAE\8F6F\96C5\9ED1","Microsoft Yahei","Arial"; background-color:#fff; margin:0; padding:0; outline:none;} /*global style*/ .g-fl{ float:left;} .g-fr{ float:right;} .g-c{ zoom:1;} .g-c:after{ clear:both; content:"."; display:block; height:0; visibility:hidden;} .g-w{ max-width: 1200px; min-width: 980px; width: 96%; margin-left:auto; margin-right:auto;} .g-hide{ display:none !important;}
全局增加一个负值下边距等于底部高度
demo.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="base.css" /> <style> /*实现的原理*/ html, body { height: 100%; } .wrapper { min-height: 100%; margin-bottom: -50px; } .footer, .push { height: 50px; } /*测试代码*/ .content{ background-color: #0066FF; height: 90px; color: #FFFFFF; line-height: 60px;} .footer{ background-color: #FF6600;} </style> </head> <body> <div class="wrapper g-w"> <div class="content"> 阅谁问君诵,水落清香浮 </div> <div class="push"></div> </div> <div class="footer g-w"> </div> </body> </html>
效果图:
相关推荐
基于vue开发H5,使用vant的UI组件开发界面,该简单模板 1. px自动转化响应式rem单位。更容易更高效开发,像素级还原设计稿; 2. axios请求封装; 3. 使用vuex管理底部tabbars的数据,实现权限控制; 4. 下拉刷新,...
背景 公司项目开发中,发现iPhoneX上吸底元素存在被小黑条遮挡的问题 原因 在苹果 iPhoneX 、iPhone XR等机型上,物理Home键被取消,改为底部...也就是说,适配安全区域也就是让小程序或者H5的内容显示在绿色区域部分。
Mui、H5+开发APP小技巧,点击底部导航切换界面源码文件,欢迎相互学习
苹果设备(iOS)微信中打开H5页面,从首页跳转到其他页面后,页面的底部会出现一个带有前进和后退按钮工具栏,而该工具栏会遮挡住面底部的内容,影响页面的正常使用。 二、原因分析: 造成该现象的原因是,当页面...
微信小程序和 h5 网页需要针对这种情况进行适配,否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况,如下图。 1. 安全区域是什么意思? 想要解决内容与小黑线重叠的问题,我们需要先了解清楚苹果对于安全区域...
微信底部菜单,移动端底部导航菜单,超级牛叉底部固定菜单,样式非常绚丽,H5移动端底部固定菜单栏目,4个打包,需要的下载交流,
HTML底部弹窗,实现抽屉效果,可以用于电影院选座位。
H5仿ios选择弹窗/多级联动选择
解决安卓嵌套H5,软键盘遮挡输入框以及页面被华为、小米等底部导航栏遮挡问题
ios打开微信返回app
H5 时间选择器 datepicker
非常实用的特效代码,可以完美运行,可以二次修改!
html5移动端底部固定菜单,响应式菜单,根据屏幕大小宽度变化而变化。
手机H5弹出纯js+css样式制作
H5U固件升级包,H5U/H5U-A8/H5U-A16/H5U-A8S
吴恩达卷积神经网络编程作业三最后需要的目标检测的模型文件,亲测可用,有分的可以给分,没分的参考下面自己生成吧。参考:...执行 生产h5文件: ./yad2k.py yolo.cfg yolo.weights model_data/yolo.h5
h5页面模版源码 ,非常酷炫的html5模板 ,可以直接使用,也可以参考学习
H5源码H5源码
H5小程序难免会用到从底部弹出时间选择框,在这里使用了jquery-weui实现了,店铺选择营业时间的功能。已经做好了时间格式和开始时间与结束时间的对比。注意使用的时候可以任意改动样式,但是jquery-weui自带的样式不...