CSS Sticky Footer

最近碰巧再看网上那一套火的不得了的高仿饿了么的视频，正巧看到一个css技巧，看了一下觉得挺简单，但是却又非常精髓，而平时公司项目和自己练手的项目里面都没有这样的需求，在这里就简单的讲述一下这个技巧（你就当我在这里做个笔记行不行）。

什么是 sticky footer

我们看到上图，就是我们需要在实现一个小叉一直停留在页面底部，当页面内容少于一屏的时候，这个小叉会被停留在页面底部，当页面内容大于一屏的时候可以吧这个小叉挤下去，而不至于让小叉被停留在页面底部而遮挡住内容，所以在这种地方使用fixed显然并没有那么合适。

---

下面我们就开始一起实现这个功能

首先是布局

<div class="wrapper">
      <div class="wrapper-main">
            <div class="wrapper-main-content">
            </div>
        </div>
        <div class="wrapper-close">
            X
        </div>
    </div>

其中wrapper为整个初始容器，wrapper-main-content为文字放置容器，下面是css

      *{
            padding:0;
            margin: 0;
        }
        html,body,.wrapper{
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }
        .wrapper-main{
            width: 900px;
            margin: auto;
            min-height: 100%;
        }
        .wrapper-main .wrapper-main-content{
            padding: 0 0 50px 0;
        }
        .wrapper-close{
            width: 900px;
            margin: -50px auto 0;
            text-align: center;
            line-height: 50px;
        }

将跟小X同级的wrapper-main设置min-height:100%;这样就可以让容器满屏，但是这样一来wrapper-close就会被挤出屏外，所以这里我们使用了margin-top: -50px通过margin负值来实现向上偏移正好可以被填充到整个wrapper-main的底部，而wrapper-main高度又是100%，所以正好来到了屏幕的底部。

这样下来我们就可以测试代码了，然后发现如果内容多到一定程度之后小叉虽然被挤出屏幕外了，但是却挡在了文字前面，所以我们这里在main里面的内容器加上了一个padding-bottom：50px;这样文字就不会再被挡住了。这里的关键是margin负值起到了向上偏移的作用，具体原理请移步相关margin负值教学，这里不再赘述。