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>

转载至：

https://www.cnblogs.com/yangchin9/p/10894622.html