用css实现footer

在html页面中,footer是非常有用,我们用它来标识它的版权和页面的相关信息。比如淘宝指数中的版权信息

它的一个特点就是会“固定”在页面的尾部,并不会随这页面主内容少而跑上面去,当页面内容过多,超过一屏幕时,会紧跟在内容尾部,具体效果如图(来自网络):

那怎么实现呢?其实很简单,只用设置css样式即可。

 

第一种方法

HTML代码

<div id="container">
  <div id="header">Header Section</div>
  <div id="body" class="clearfix">
    页面容容部分
  </div>
  <div id="footer">Footer Section</div>
</div>

CSS代码

html,body {
  margin: 0;
  padding:0;
  height: 100%;
}
#container {
  min-height:100%;
  height: auto !important;
  height: 100%; /*IE6不识别min-height*/
  position: relative;
}
#body {
  width: 960px;
  margin: 0 auto;
  padding-bottom: 60px;/*等于footer的高度*/
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;/*脚部的高度*/
  clear:both;
}

 

优点:
结构简单清晰,无需js和任何hack能实现各浏览器下的兼容,同时在ipad、iphone下也可以正常运行

缺点:

1. 需要给div#footer容器设置一个固定高度
2. 需要将div#page容器的padding-bottom设置大于等于div#footer的高度

参考: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
DEMO: http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

 

第二种方法

利用footer的margin-top负值来实现footer永远固定在页面的底部效果,原理和效果跟第一种方法是一样的

HTML代码

<div id="container">
  <div id="header">Header Section</div>
  <div id="page">Main Content</div>
</div>  
<div id="footer">footer</div>

 

CSS代码

html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#container {
  min-height: 100%;
  height: auto !important;
  height: 100%;
}
#footer {
  position: relative;
  margin-top: -60px;/*等于footer的高度*/
  height: 60px;
  clear:both;
}
#page {
  padding-bottom: 60px;/*高度等于footer的高度*/
}

 

  第三种方法 

HTML代码

<div id="container">
    <div id="page"> Content </div>
    <div class="push"> 空标签</div>
  </div>
<div id="footer">Footer</div>

 CSS代码

html,body{
  height: 100%;
  margin:0;
  padding:0;
}
#container {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -60px;/*margin-bottom的负值等于footer高度*/
}
.push, #footer {
  height: 60px;
  clear:both;
}

 

优点:

简单明了,易于理解,兼容所有浏览器。

缺点:

1.较之前面的两种方法,多使用了一个div.push容器

2.同样此方法限制了footer部分高度,无法达到自适应高度效果。

这种方法并不推荐使用

参考:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

 

补充:现在html5中已经增加了footer标签,在适当情况可以善用这个标签

声明:这篇文章并非完全原创,而且根据我同事田超强的分享文章整理所得。

posted @ 2013-04-03 16:15 lengyuhong 阅读(...) 评论(...) 编辑 收藏