【业务】CSS布局中的sticky footers布局

What ?

什么是sticky footers，简单说这是一种在业务场景里常见的css布局需求。

举个栗子：
    你在做一个类似博客的页面，由于数据有很多条，需要做一个分页固定在底部居中。
    这个听上去so esay，似乎只需要display:fixed就可以解决问题了。
    可是事实上，当数据较多时，脱离标准流的分页栏会覆盖在一条条的数据上面。

    所以，我们的真正的需求应该是，当数据较少时，我们的分页栏固定在页面底部居中
    当数据足够多，超过一页时，我们的分页栏应该乖乖在底部居中，而不是无视任何内容，傻傻的固定的定位在那里。

How ?

实现方法如下

    body {
        display: flex; 
        flex-flow: column;     // 垂直方向上伸缩
        min-height: 100%;      //  保证body就算没有内容也撑满整个视图
    }


    .main { 
        flex: 1;               //中间所有需要自适应的内容，我们用main这个div包括起来，设置main的高度自适应
    }

    .footer {
        flex: 0 0 50px        // 设置底部分页的高度为固定50px
        margin: 0 auto
    }

Why ?

代码有些简陋，因为原理较为简单，就是利用了伸缩布局，将整个页面划分成body 底部的分页(footer) 以及 需要自适应的网页主体（main）这三个部分。

由于body的min-height 也是 100% 并且 footer设置了 flex: 0 0 50px ,这样保证了当内容较少时，footer依旧不会 “飞上去”

由于main是设置了flex： 1 ,保证了内容较长时，可以自适应。

这是只是抛砖引玉，毕竟再详细的教程，如果不去动手和思考，依旧是一头雾水。

最后，推荐一篇更详细的文章，专门讲解sticky footers的。

[css秘密花园]（http://www.w3cplus.com/css3/css-secrets/sticky-footers.html）