css:min-height不兼容火狐浏览器的解决方法
程序员文章站
2022-05-07 18:54:20
...
我们在进行页面架构的时候,一般会分成三个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也能实现最小高度和内容超出自适应了。
以上就是css:min-height不兼容火狐浏览器的解决方法的详细内容,更多请关注其它相关文章!
推荐阅读
-
IE11浏览器网页不兼容的四种解决方法
-
Css浏览器兼容的解决方法
-
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
-
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法_javascript技巧
-
浏览器不兼容的问题_html/css_WEB-ITnose
-
2013全面兼容多浏览器IE6?8&火狐&其他主流浏览器的CSS HACK写法_html/css_WEB-ITnose
-
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结_javascript技巧
-
2013全面兼容多浏览器IE6?8&火狐&其他主流浏览器的CSS HACK写法_html/css_WEB-ITnose
-
IE11浏览器网页不兼容的四种解决方法
-
求助:有谁解决过微信内置浏览器不兼容浮动的_html/css_WEB-ITnose