方法一：footer高度固定+绝对定位

HTML代码：

    
     
      头部
     
    
     
      中间内容
     
    
     
      底部信息
     

CSS代码：

*{
       margin:0;    padding:0;}html{
       height:100%;}body{
       min-height:100%;    margin:0;    padding:0;    position:relative;}header{
       background: #000;    text-align: center;    height:50px;    line-height: 50px;    color:#fff;}main{ /* main的padding-bottom值要等于或大于footer的height值 */    padding-bottom:100px;    background:#ccc;    text-align: center;}footer{
       position:absolute;    color:#fff;    bottom:0;    width:100%;    height:100px;    line-height:100px;    text-align:center;    background-color: #000;}

实现的效果：

• 首先，设置body的高度至少充满整个屏幕，并且body作为footer绝对定位的参考节点；
• 其次，设置main（footer前一个兄弟元素）的padding-bottom值大于等于footer的height值，以保证main的内容能够全部显示出来而不被footer遮盖；
• 最后，设置footer绝对定位，并设置height为固定高度值。

优点：footer一直存在于底部。

缺点：中间区域main如果内容不够，不能撑满页面的中间区域。

 方法二：footer高度固定+margin负值

HTML代码：

    
     
        
      
       头部
      
        
      
       中间内容
      
    
     
    
     
      底部信息
     

CSS代码：

*{
       margin:0;    padding:0;}html,body{
       height:100%;}.container{
       min-height:100%;}header{
       background: #000;    text-align: center;    height:50px;    line-height: 50px;    color:#fff;}main{
        padding-bottom:100px;    background:#ccc;    text-align: center;}footer{
       color:#fff;    height:100px;    line-height:100px;    margin-top:-100px;    text-align:center;    background-color: #000;}

此方法把footer之前的元素放在一个容器里面，形成了container和footer并列的结构：

首先，设置.container的高度至少充满整个屏幕；

其次，设置main（.container最后一个子元素）的padding-bottom值大于等于footer的height值；

最后，设置footer的height值和margin-top负值。

展示效果跟第一种是一样的，缺点跟第一种也是一样的。

方法三：footer高度任意+js

HTML代码：

     
      头部
     
     
      中间内容
     
     
      底部信息
     

CSS代码：

*{
       margin:0;    padding:0;}html{
       height:100%;}body{
       min-height:100%;    margin:0;    padding:0;    position:relative;}header{
       background: #000;    text-align: center;    height:50px;    line-height: 50px;    color:#fff;}main{ /* main的padding-bottom值要等于或大于footer的height值 */    background:#ccc;    text-align: center;}footer{
       color:#fff;    width:100%;    height:100px;    line-height:100px;    text-align:center;    background-color: #000;}/* 动态为footer添加类fixed-bottom */.fixed-bottom {
       position: fixed;    bottom: 0;    width:100%;}

JS（jquery）代码：

$(function(){    function footerPosition(){        $("footer").removeClass("fixed-bottom");        var contentHeight = document.body.scrollHeight,//网页正文全文高度            winHeight = window.innerHeight;//可视窗口高度，不包括浏览器顶部工具栏        if(!(contentHeight > winHeight)){            //当网页正文高度小于可视窗口高度时，为footer添加类fixed-bottom            $("footer").addClass("fixed-bottom");        }    }    footerPosition();    $(window).resize(footerPosition);});

常用的纯css实现footer sticker

CSS代码：

html, body, #sticker {
   height: 100%;}    body > #sticker {
   height: auto; min-height: 100%;}    #stickerCon {
   padding-bottom: 40px;}     #footer {
   margin-top:-40px; height: 40px; width: 100%; text-align: center; line-height: 40px; color: #ABA498; font-size: 12px; background: #fafafa; border-top:1px solid #E7E7E7;}

HTML代码：

     
    
      
     
     
      footer