火狐min-height不兼容解决方法
我们在进行页面架构的时候,一般会分成三个section:header、body、footer。如下面这个页面:
这个时候我们就需要对body部分进行最小高度设置,才能避免footer部分出现在页面中间的情况。比方说下面在这个写法:
.page-content-header {
min-height: 5%;
}
.page-content-body {
min-height: 100%;
}
.page-content-footer {
min-height: 5%;
}
这样的写法会让body部分有个充满页面大小的高度,footer部分自然会在页面的最低端,而且当body部分的内容超出了100%时,高度会自动撑开,不会出现溢出的情况。
但是,问题来了,火狐浏览器不兼容这种写法,min-height:100% 完全不生效,我们可以用以下方法来进行兼容:
.page-content-body {
min-height: 100%;
/*火狐兼容*/
min-height: 600px !important;
}
.page-content-body:after {
content:"";
visibility:hidden;
display:block;
clear:both;
height:0px;
}
首先我们用 !important 来对火狐浏览器做hack,设置一个最小高度600px,然后利用伪元素 :after来做样式清除,以达到当内容超出最小高度时,高度会相应增加的目的。
我们设置显示框类型display为块级元素block,设置clear为左右两侧都不允许浮动元素,我们插入的生成内容content为空,然后设置高度为0,将元素设置为不可见。
这样就能让Firefox也能实现最小高度和内容超出自适应了。
火狐min-height不兼容解决方法的更多相关文章
- IE6-7下margin-bottom不兼容解决方法(非原创,视频中看到的)
在IE低版本下有很多不兼容,现在将看到的 IE6-7下margin-bottom不兼容解决方法 演示一下,方便日后自己查阅. <!DOCTYPE html> <html la ...
- ie6,ie7,ie8 css bug兼容解决方法
IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...
- ie6,ie7,ie8 css bug汇总以及兼容解决方法
1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是 ...
- jquery-mobile的页面跳转和iscroll之间的兼容解决方法
有一项目需要用到滚动效果,最后选择了iscroll插件,代码写好后chrome测试一切正常(直接查看用到滚动效果的页面以下统称当前页面),运行APP应用一步步跳转到当前页面的时候,滚动效果和滚动条等死 ...
- Firefox 火狐 页面特殊符号乱码解决方法
这是由于字体问题导致的. 解决方法,参照下图设置,重点是红色标注区域.衬线字体务必选择兼容性最好的,比如思源黑体.宋体.
- IE6 CSS高度height:100% 无效解决方法总结
原文地址:http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html 上面红色部分为 height:100%; 自动拉 ...
- setAttribute()使用方法与IE兼容解决方法
我们经常需要在JavaScript中给Element动态添加各种属性,可以使用setAttribute()来实现,但涉及到了浏览器的兼容性问题.setAttribute(string name,str ...
- IScroll5+在ios、android点击(click)事件不兼容解决方法
Bug描述: ios.android4.4+下不能触发click事件. Bug解决: 调用iscroll插件,增加配置参数:click:true/false click的值是要根据移动终端设备进行判断 ...
- sharepoint 2013 office web app 2013 文档在线浏览 IE11 浏览器不兼容解决方法
昨晚配置完成office web apps 2013的外部网络访问之后,今天发现了一个很奇怪的问题,就是IE 11不支持文档在线浏览,找了很多方法,打补丁什么的,都不管用,最后在预览文件的页面,看到& ...
随机推荐
- 【Python】[进程和线程]多进程,多线程,ThreadLocal,进程VS.线程,分布式进程
1.多进程,multiprocessing模块, 进程间的通信:Queue[队列],Pipes[管子]2.多线程, 注意:线程公用变量,混乱 解决方法Lock:因为只有一个锁,所以当要执 ...
- Android开发环境的演变
之前安装过eclipse,给我的感觉是,好生麻烦.刚开始自己装花了好多时间.隐约还记得有两个小tips: 1)打开时出现 “failed to load the JNI shared library ...
- [日常训练]yayamao的神题
Description $yayamao$是数学神犇,一天他在纸上计算起了$1/P$, 我们知道按照模拟除法可以得到准确解,例如$1/7=0.(142857),1/10=0.1(0)$.$yayama ...
- 【BZOJ-2730】矿场搭建 Tarjan 双连通分量
2730: [HNOI2012]矿场搭建 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1602 Solved: 751[Submit][Statu ...
- CodeForces 165E Compatible Numbers(位运算 + 好题)
wo integers x and y are compatible, if the result of their bitwise "AND" equals zero, that ...
- win7系统中如何使文件显示出扩展名
win7系统中如何使文件显示出扩展名-------------------- 1.点击计算机-->>点击组织,然后选择"文件夹及搜索选项"-->> ---- ...
- 裁剪要素出现错误 :HRESULT:0x80040239
pFeatureBuffer = pOutFeaCls.CreateFeatureBuffer(); pFeatureCursor = pOutFeaCls.Inser ...
- diff 比较两个文件的差异
功能:比较两个文件的差异,并把不同地方的信息显示出来.默认diff格式的信息. diff比较两个文件或文件集合的差异,并记录下来,生成一个diff文件,这也是我们常说的补丁文件.也使用patch命令对 ...
- 扼杀 304,Cache-Control: immutable
随着近些年社交网站的流行,越来越多的人学会了“刷”网页 ── 刷微博,刷朋友圈,刷新闻,刷秒杀页.这里的“刷”,就是刷新的意思,在浏览器里,你可以通过点击刷新按钮,或者用快捷键,或者移动端的下拉操作来 ...
- Coursera-Getting and Cleaning Data-Week3-dplyr+tidyr+lubridate的组合拳
Coursera-Getting and Cleaning Data-Week3 Wednesday, February 04, 2015 好久不写笔记了,年底略忙.. Getting and Cle ...