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

页脚紧贴页面底部相信我们前端经常要使用，这里自己总结了下各个方法并简单介绍了下原理及注意点，大家可根据各优缺点进行取舍：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        header, article, footer {
            border: 1px solid red;
            box-sizing: border-box;
        }

        header, footer {
            height: 50px;
        }

        .flex {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .flex > article {
            flex: 1;

        }

        .grid {
            display: grid;
            grid-template-rows: 50px 1fr 50px;
            min-height: 100%;
        }
        .grid>footer{
            grid-row: 3/4 ;
        }

        .calc > article {
            min-height: calc(100vh - 100px);
        }

        html, body {
            height: 100%;
        }

        .absolute {
            min-height: 100%;
            position: relative;
        }

        .absolute > article {
            padding-bottom: 50px;
        }

        .absolute > footer {
            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;
        }

        .margin {
            height: 100%;
        }

        .margin-wrap {
            min-height: 100%;
        }

        .margin > .margin-wrap > article {
            padding-bottom: 50px;
        }

        .margin > footer {
            margin: -50px 0 0 0;
        }

        .margin-push {
            height: 100%;
        }

        .margin-push > .margin-push-wrap {
            margin: 0 0 -50px 0;
            min-height: 100%;
        }

        .margin-push > .margin-push-wrap > .push {
            height: 50px;
        }

        .table {
            height: 100%;
        }

        .table > .table-wrap {
            display: table;
            width: 100%;
            height: 100%;
        }

      .table > .table-wrap > footer {
            display: table-row;
            height: 1px;
        }


    </style>
</head>
<body>
  一、flex方法

1、实现原理
主要使用了弹性盒中的 flex: 1属性来实现自适应伸缩
2、注意点
注意兼容性
<!--<section class="flex">-->
<!--<header>头部 flex</header>-->
<!--<article>主要 flex</article>-->
<!--<footer>底部 flex</footer>-->
<!--</section>-->

二、 grid方法 

1、实现原理
主要使用了网格布局中的fr单位、grid-row:3/4及min-height:100%实现的；
2、注意点
注意兼容性
<!--<section class="grid">-->
<!--<header>头部 grid</header>-->
<!--<article>主要 grid</article>-->
<!--<footer>底部 grid</footer>-->
<!--</section>-->

三、 calc方法
1、实现原理
calc计算及 vh单位；
2、注意点
注意兼容性
<!--<section class="calc">-->
<!--<header>头部 calc</header>-->
<!--<article>主要 calc</article>-->
<!--<footer>底部 calc</footer>-->
<!--</section>-->


四、 absolute方法

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

<!--<section class="absolute">-->
<!--<header>头部 absolute</header>-->
<!--<article>主要 absolute</article>-->
<!--<footer>底部 absolute</footer>-->
<!--</section>-->

五、 负margin方法 

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

<!--<section class="margin">-->
<!--<div class="margin-wrap">-->
<!--<header>头部 负margin</header>-->
<!--<article>主要 负margin</article>-->
<!--</div>-->
<!--<footer>底部 负margin</footer>-->
<!--</section>-->

六、 负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）

<!--<section class="margin-push">-->
<!--<div class="margin-push-wrap">-->
<!--<header>头部 负margin加新增元素法</header>-->
<!--<article>主要 负margin加新增元素法</article>-->
<!--<div class="push"></div>-->
<!--</div>-->
<!--<footer>底部 负margin加新增元素法</footer>-->
<!--</section>-->

七、 table方法

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

<section class="table">
    <div class="table-wrap">
        <header>头部 负margin加新增元素法</header>
        <article>主要 负margin加新增元素法</article>
        <footer>底部 负margin加新增元素法</footer>
    </div>
</section>
</body>
</html>
在线预览地址：https://codepen.io/anon/pen/XVmLJK
资料推荐：
1、如何将页脚固定在页面底部
2、再谈等高列布局、水平垂直居中与置顶页脚
3、Ryan Fait's sticky footer, but responsive
4、各种CSS实现Sticky Footer
5、 CSS粘住固定底部的5种方法