我们在进行页面架构的时候,一般会分成三个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不兼容解决方法的更多相关文章

  1. IE6-7下margin-bottom不兼容解决方法(非原创,视频中看到的)

    在IE低版本下有很多不兼容,现在将看到的   IE6-7下margin-bottom不兼容解决方法   演示一下,方便日后自己查阅. <!DOCTYPE html> <html la ...

  2. ie6,ie7,ie8 css bug兼容解决方法

    IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...

  3. ie6,ie7,ie8 css bug汇总以及兼容解决方法

    1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是 ...

  4. jquery-mobile的页面跳转和iscroll之间的兼容解决方法

    有一项目需要用到滚动效果,最后选择了iscroll插件,代码写好后chrome测试一切正常(直接查看用到滚动效果的页面以下统称当前页面),运行APP应用一步步跳转到当前页面的时候,滚动效果和滚动条等死 ...

  5. Firefox 火狐 页面特殊符号乱码解决方法

    这是由于字体问题导致的. 解决方法,参照下图设置,重点是红色标注区域.衬线字体务必选择兼容性最好的,比如思源黑体.宋体.

  6. IE6 CSS高度height:100% 无效解决方法总结

    原文地址:http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html   上面红色部分为 height:100%; 自动拉 ...

  7. setAttribute()使用方法与IE兼容解决方法

    我们经常需要在JavaScript中给Element动态添加各种属性,可以使用setAttribute()来实现,但涉及到了浏览器的兼容性问题.setAttribute(string name,str ...

  8. IScroll5+在ios、android点击(click)事件不兼容解决方法

    Bug描述: ios.android4.4+下不能触发click事件. Bug解决: 调用iscroll插件,增加配置参数:click:true/false click的值是要根据移动终端设备进行判断 ...

  9. sharepoint 2013 office web app 2013 文档在线浏览 IE11 浏览器不兼容解决方法

    昨晚配置完成office web apps 2013的外部网络访问之后,今天发现了一个很奇怪的问题,就是IE 11不支持文档在线浏览,找了很多方法,打补丁什么的,都不管用,最后在预览文件的页面,看到& ...

随机推荐

  1. 【Python】[进程和线程]多进程,多线程,ThreadLocal,进程VS.线程,分布式进程

    1.多进程,multiprocessing模块,   进程间的通信:Queue[队列],Pipes[管子]2.多线程,    注意:线程公用变量,混乱   解决方法Lock:因为只有一个锁,所以当要执 ...

  2. Android开发环境的演变

    之前安装过eclipse,给我的感觉是,好生麻烦.刚开始自己装花了好多时间.隐约还记得有两个小tips: 1)打开时出现 “failed to load the JNI shared library ...

  3. [日常训练]yayamao的神题

    Description $yayamao$是数学神犇,一天他在纸上计算起了$1/P$, 我们知道按照模拟除法可以得到准确解,例如$1/7=0.(142857),1/10=0.1(0)$.$yayama ...

  4. 【BZOJ-2730】矿场搭建 Tarjan 双连通分量

    2730: [HNOI2012]矿场搭建 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1602  Solved: 751[Submit][Statu ...

  5. CodeForces 165E Compatible Numbers(位运算 + 好题)

    wo integers x and y are compatible, if the result of their bitwise "AND" equals zero, that ...

  6. win7系统中如何使文件显示出扩展名

    win7系统中如何使文件显示出扩展名-------------------- 1.点击计算机-->>点击组织,然后选择"文件夹及搜索选项"-->> ---- ...

  7. 裁剪要素出现错误 :HRESULT:0x80040239

    pFeatureBuffer = pOutFeaCls.CreateFeatureBuffer();                 pFeatureCursor = pOutFeaCls.Inser ...

  8. diff 比较两个文件的差异

    功能:比较两个文件的差异,并把不同地方的信息显示出来.默认diff格式的信息. diff比较两个文件或文件集合的差异,并记录下来,生成一个diff文件,这也是我们常说的补丁文件.也使用patch命令对 ...

  9. 扼杀 304,Cache-Control: immutable

    随着近些年社交网站的流行,越来越多的人学会了“刷”网页 ── 刷微博,刷朋友圈,刷新闻,刷秒杀页.这里的“刷”,就是刷新的意思,在浏览器里,你可以通过点击刷新按钮,或者用快捷键,或者移动端的下拉操作来 ...

  10. Coursera-Getting and Cleaning Data-Week3-dplyr+tidyr+lubridate的组合拳

    Coursera-Getting and Cleaning Data-Week3 Wednesday, February 04, 2015 好久不写笔记了,年底略忙.. Getting and Cle ...