sticky footer布局

概念：如果页面内容不够长时，页脚显示在视窗底部，当内容足够长时，页脚会被内容向下推送。

<div class="wrapper">
  <div class="content">我是内容</div>
  <div class="footer">我是底部</div>
</div>

实现方式：

1.当footer为定高时

a、可以利用calc计算属性实现

      .content {
          min-height: calc(100vh - 30px);
        }
        .footer {
          height: 30px;
        }

b、用相对定位relative实现

 .content {
      min-height: 100vh;
      padding-bottom: 30px;
      box-sizing: border-box;
    }

    .footer {
      height: 30px;
      position: relative;
      margin-top: -30px
    }

2.当footer为不定高时

a、利用flexbox布局实现

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

    .content {
      flex: 1
    }