纯CSS实现Footer固定底部,超过一屏自动撑开打赏

日常开发中经常遇到网页内容过少时底部版权区域上浮,网页是经典的Header、Content、Footer三部分组成的情况下,之前要么采用js修改Footer的position,高度低于一屏时采用fixed,超出改用static,但是这样会出现抖动,也试过初始化时设置Content的min-height,但终归是使用了js,不太完美,CSS的也试过使用margin-bottom:-10000px;padding-bottom:10000px的方法填充底部颜色,但效果不见得有多好看。

最近又遇到此类问题,尝试采用之前提到过的CSS水平垂直居中方法来解决,最终找到比较靠谱的方法,就此总结一下,以备后用。

废话不说,直接上代码,以下为CSS,采用border-box,所以IE7下面无效,由于工作原因,只测试到IE8,没考虑低版本浏览器。

fixed_footer_code

* { margin: 0; padding: 0;box-sizing: border-box;}
html,body { height: 100%;}
.header { height: 60px; margin-bottom: -60px; background: #1381cc; color: #FFF; position: relative;}
.content { background: #CCC; min-height: 100%; padding: 60px 0 60px;}
.footer { height:60px; margin-top: -60px; background: #0c4367; color: #FFF;}

Dom结构与样式如上图,由于博客编码问题,不再贴HTML代码,且这里仅简单示范,具体可自己尝试,大概思路就是通过给html、body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header、footer则刚好完美占满全屏(参考《div绝对居中、宽高自适应、多栏宽度自适应》),但是有了这两个,只能另寻他路,由于高版本浏览器对box-sizing的支持,我们可以在100%的高度中通过padding给header、footer空出两部分空白区域,再通过给header设置等同于自身高度的负值margin-bottom,给footer设置等同于自身高度的负值margin-top,就完美的把两者移回可见区域,如此以来,既满足content部分不满一屏时footer在底部,又满足了,超过一屏时footer被撑开的需求。

注:这里为了方便,使用*重置了所有样式,正常工作中不推荐。

下面是各种情况下页面展示情况。

一屏、不满一屏时

fixed_footer_demo1

超过一屏时顶部

fixed_footer_demo2

超过一屏时底部

fixed_footer_demo3

网上查了下资料,发现早就有类似实现方案,基本上类似,通过演变,可以将footer以外的部分再用wrap包裹起来,内部设置padding-bottom,footer相同的使用margin-top,如此以来不用使用border-box,理论上可向下兼容至更低版本IE,但手上没有更低版本的IE,简单通过IEtester测试一下,可兼容至IE7,简单代码如下。

fixed_footer_code_new

另外提供一份国外设计达人的方案,网上搜罗到的,纯CSS实现,兼容至IE6以及更低版本,IETester测试到IE5,代码如下图。

fixed_footer_code_ie6

纯CSS实现Footer固定底部,超过一屏自动撑开
文章《纯CSS实现Footer固定底部,超过一屏自动撑开》二维码
  • 微信打赏
  • 支付宝打赏

已有9条评论

  1. 朴人博客

    多多交流,我建了个前端群,没事可以加一下,在右侧有链接

    2016-03-17 23:54 回复
  2. 朴人博客

    多多交流

    2016-03-17 23:53 回复
  3. vultr

    这个还是比较实用的。

    2015-11-13 10:50 回复

(必填)

(必填)

(可选)