火狐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不支持文档在线浏览,找了很多方法,打补丁什么的,都不管用,最后在预览文件的页面,看到& ...
随机推荐
- Spring Boot入门===Hello World
昨天无意间看到Spring Boot ,今天又了解了一下,试着写一个Hello World! 今天看了半天,最后还是要用Maven最方便!以下: 一.工具 JDK1.7 Eclipse Maven ...
- 代码生成工具——Entity Framework Power Tools
Entity Framework Power Tools是VS上的一个根据数据库生成Model的Code First映射工具.在VS里面右键即可看到.什么,没有? 别慌,可以单独下载的,见 https ...
- Pyhont-Urllib2
Urllib2 相当于的Urllib 的升级版 但又不能代替 Urllib 这个我得新手很费解呢...这个问题留着把,,等以后成大牛的时候在回来想想这儿问题!! Urllib2 常用 // 1 设置 ...
- 【转】Java面试题全集2.2(上)
146.什么是IoC和DI?DI是如何实现的? 答:IoC叫控制反转,是Inversion of Control的缩写,DI(Dependency Injection)叫依赖注入,是对IoC更简单的诠 ...
- 一些js 插件的作用
前言: 从一些开源网站上下载下来的 后台管理系统模板一般会有很多的js ,其js 的功能是什么呢?这里随手查询了一下,记录下来 正文: 1.zDialog.js 各种弹窗插件详细案例:http://w ...
- 数据结构图文解析之:树的简介及二叉排序树C++模板实现.
0. 数据结构图文解析系列 数据结构系列文章 数据结构图文解析之:数组.单链表.双链表介绍及C++模板实现 数据结构图文解析之:栈的简介及C++模板实现 数据结构图文解析之:队列详解与C++模板实现 ...
- Python的方法解析顺序(MRO)[转]
本文转载自: http://hanjianwei.com/2013/07/25/python-mro/ 对于支持继承的编程语言来说,其方法(属性)可能定义在当前类,也可能来自于基类,所以在方法调用时就 ...
- 5 构建Mysql+heartbeat+DRBD+LVS集群应用系统系列之生产环境下drbd裂脑处理
preface 公司的业务变更,导致服务器要搬迁,所以需要关闭服务器,然后到新地在开启服务器. 关机前确定drbd+heartbeat+mysql是正常使用的,没有异常,Heartbeat和drbd都 ...
- <<< request.getParameterMap()方法
request.getParameterMap()方法返回的值,是一个Map类型的,记录着所提交的请求中请求参数和请求参数值的映射关系. 当不知道前台传过来的是什么,且不知道传过来的对象时,可用这个, ...
- SqlHelper c#
using System; using System.Data; using System.Xml; using System.Data.SqlClient; using System.Collect ...