sticky footer布局

sticky footer布局（粘在底部）

两种思路

第一种：

按照下面的布局，设置外层容器的width和height都为100%。
设置.wrapper的最小高度为100%
设置内容底部的padding-bottom为64px.
设置footer的margin-top为-64px.这样就相当与是footer一直贴在内容区域的最底部。

> html  <div class="container">    <div class="wrapper">      <div class="main">文字</div>    </div>    <div class="footer">X</div>  </div>> css   .container {      position: fixed;      top: 0;      left: 0;      width: 100%;      height: 100%;    }    .wrapper {      width: 100%;      min-height: 100%;    }    .main {      padding-bottom: 64px;    }    .footer {      margin-top: -64px;    }

第二种：

flex布局,只需要四行代码，就搞定了，但是只兼容ie10+.

> html   <div class="container">    <div class="content">      内容    </div>    <footer>      <p>© 2017 sticky footer布局 学习代码</p>    </footer>  </div>> css   .container {      display: flex;      flex-flow: column;      min-height: 100vh;    }    .content {      flex: 1;    }