页脚紧贴页面底部（sticky footer）实现方法总结

页脚紧贴页面底部相信我们前端经常要使用，这里自己总结了下各个方法并简单介绍了下原理及注意点，大家可根据各优缺点进行取舍：

    
    
    


  一、flex方法

1、实现原理
主要使用了弹性盒中的 flex: 1属性来实现自适应伸缩
2、注意点
注意兼容性






二、 grid方法 

1、实现原理
主要使用了网格布局中的fr单位、grid-row:3/4及min-height:100%实现的；
2、注意点
注意兼容性






三、 calc方法
1、实现原理
calc计算及 vh单位；
2、注意点
注意兼容性







四、 absolute方法

1、实现原理
父元素使用min-height:100%，footer采用相对于父元素的绝对定位，
然后再使用bottom:0；即可让footer紧贴页面底部；然后在article上
使用padding-bottom使得footer正好覆盖该位置；
2、注意点
父元素别忘记使用position:relative，article别忘记使用padding-bottom；







五、 负margin方法 

1、实现原理
靠article的padding-bottom为footer留出空间，再将footer的margin-top设为其自身高度的负值，
这样footer就会上移至article留出的空间内；由于margin-wrap的min-height为100%，
因此footer会永远紧贴在页面底部；
2、注意点
footer不与header及article同级，其需要与他们的父元素同级；









六、 负margin+新增元素方法

实现原理
在margin-push-wrap里面的最后子节点新增一个div.push的元素，该元素的高度与footer是一样的，
然后将margin-push-wrap的margin-bottom设置为footer的高度的负值，这样footer就会上移，
正好覆盖住div.push元素；
注意点
footer不与header及article同级，而与它们的父元素同级；

啰嗦几句
1、如果不想新增元素div.push 也可以使用:after的方式来替代
2、该方法是由 Ryan Fait想出来的，不过很可惜他 英年早逝了 愿他在天堂一切安好。
说来也巧，今天正好是他去世3周年纪念日（真的很巧。。。他的个人主页：ryanfait.net）










七、 table方法

实现原理
主要利用 display: table-row 及height:1 的表格属性实现
注意点
footer与header及article同级；


    

        
头部 负margin加新增元素法
        
主要 负margin加新增元素法
        
底部 负margin加新增元素法
    

在线预览地址：https://codepen.io/anon/pen/XVmLJK
资料推荐：
1、如何将页脚固定在页面底部
2、再谈等高列布局、水平垂直居中与置顶页脚
3、Ryan Fait's sticky footer, but responsive
4、各种CSS实现Sticky Footer
5、 CSS粘住固定底部的5种方法