Vue.js动态获取浏览器高度、宽度并进行实时修改DOM元素高度

需求：项目中有高度、宽度自适应需求，需要适应不同分辨率的高度及宽度，在不同分辨率下效果区别不会很大

html代码如下：

<template> 
    <div id="home">
       <div class="head"  > 
             <v-head></v-head>
       </div>
       
   	   <div class="content" :style="GetWindowInfo" >
             <router-view></router-view>       
       </div>
    </div>   
</div>

js代码如下：

<script>
export default {
  data () {
　　return {
     GetWindowInfo:{
            height:'',  //动态获取content高度
            width:''	//动态获取content宽度
        },
　　}
  },
  methods:{
    GetWindowInfo(){
            // 获取浏览器高度，减去顶部导航栏的值70（可动态获取）,再减去head-DIV高度值80
        this.GetWindowInfo.height=window.innerHeight-70-80+'px';
        this.GetWindowInfo.width=window.innerWidth+'px';
    }
  },
  created(){
    window.addEventListener('resize', this.GetWindowInfo); //注册监听器
    this.GetWindowInfo() //页面创建时先调用一次
  },
  destroyed(){
    window.removeEventListener('resize', this.GetWindowInfo)
  }
}
</script>

css代码：

<style scoped>
.home{
overflow:scroll; 
text-align: center;
background: rgb(255, 255, 255);

}
/*头DIV*/
.head{
background: #ffffff;
margin:auto;
width:1000px;
height:80px;
}
/*内容DIV*/
.content{
overflow:scroll;
overflow-x:hidden;
margin: 0 auto;    
text-align: center;    
background: #ffffff;
}

</style>