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