Vue-footer始終置底

需求：當頁面高度不足一屏時需要footer固定顯示在頁面底部，而頁面內容超過一屏時需要footer緊跟在頁面內容的最后。

思路：通過獲取 網頁可見區域高度：document.body.clientHeight;設置內容區域的最小高度，從而曲線救國使footer置底。

代碼：

<template>
    <div id="app">
        <Header></Header>
        <div id="v-content" v-bind:style="{minHeight: Height+'px'}"><router-view /></div>
        <Footer></Footer>
    </div>
</template>

<script>
export default {
  name: 'App',
  data() {
     return {
       Height: 0
     }
  },
  mounted(){
    //動態設置內容高度 讓footer始終居底   header+footer的高度是100
    this.Height = document.documentElement.clientHeight - 100;  
　　//監聽瀏覽器窗口變化　
    window.onresize = ()=> {this.Height = document.documentElement.clientHeight -100}
  }
}
</script>