Vue 项目 控制页面内 div 根据浏览器窗口大小自适应高度

做项目时遇到以下问题：
在页面顶部、底部组件高度固定的情况下，如何实现中间内容区域盒子根据浏览器窗口大小自适应高度

解决方案如下

// 定义方法，获取浏览器窗口高度
methods: {
  getDivHeight() {
    const screenheight = window.innerHeight
    this.$refs.mainDiv.style.height = screenheight - 704 + 'px'
    // 704 为 头部组件高度 + 底部组件高度
    // mainDiv 为需控制高度自适应盒子，通过 ref="mainDiv" 绑定
  },
},
// 在 mounted 生命周期监听窗口变化并触发上文处理函数，修改高度
mounted() {
  this.getDivHeight()
  window.addEventListener('resize', this.getDivHeight)
},
destroyed() {
  window.removeEventListener('resize', this.getDivHeight, false)
},

样式中设置初始高度及最小高度

.box {
  height: 0;
  min-height: 370px;
}