footer 吸底效果

预期的效果：

（1）当内容较少（不足以占满可视区域）时，footer置于可视区域的底部

（2）当内容过多（超出可视区域）时，footer置于页面的最底部

<div class="container">
  <div class="wrap clearfix">
    <div class="content">
      <p class="list-item" v-for="i in length" :key="i">test content -- {{ i }}</p>
    </div>
  </div>
  <footer>Footer</footer>
</div>

<style lang="sass" scoped>
  html, body
    height: 100%
  .container
    position: fixed
    width: 100%
    height: 100%
    top: 0
    left: 0
    overflow: auto
    .wrap
      width: 100%
      min-height: 100%
      .content
        padding-bottom: 60px
        .list-item
          width: 100%
          height: 30px
          border: 1px solid #ccc
    footer
      width: 100%
      height: 60px
      margin-top: -60px
      background-color: orange
</style>

重点：

（1）最外层容器container用fixed和height:100%来使其撑满整个视窗（height不再已父级为标准，而是以浏览器视窗为标准）

位置属性为fixed,固定定位
盒子将脱离原来的文本流，进入到新的一层，
盖在原来文本流之上，并且可以通过left right top bottom
四个属性，对盒子进行移动，移动的基准定是浏览器视窗，与其他盒子无关

（2）content的padding-bottom、footer的height要相等，margin-top为height的负值，是为了使footer紧贴内容底部

参考：

https://www.cnblogs.com/yesyes/p/6517076.html

https://blog.csdn.net/lanseguhui/article/details/80536853