vue 页面高度自适应 超出部分滚动条

可视区高：document.body.clientHeight
可视区高+边框线：document.body.offsetHeight
html:

<div :style="{ height: screenHeight + 'px' }" class='odiv'>最外层div</div>

js部分:document.body.clientHeight - 110(这个数值根据自身页面预留来设置,我页面是头部菜单固定,下面div内容自适应)

data:{
  screenHeight: document.body.clientHeight - 110(页面头部有固定高度)
}
watch: {
   screenHeight (val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenHeight = val
        this.timer = true
        let that = this
        setTimeout(function () {
          // 打印screenWidth变化的值
          console.log(that.screenHeight)
          that.timer = false
        }, 400)
      }
    }
  }

在页面mounted时，挂载window.onresize方法：

mounted () {
 const that = this
 window.onresize = () => {
   return (() => {
       // 可以限制最小高度
      // if (document.body.clientHeight - 240 < 450) {
      //   return
      // }
      window.screenHeight = document.body.clientHeight- 110
      that.screenHeight = window.screenHeight
   })()
 }
}

css

<style lang='less' scoped>
 .odiv{
   height: 100%;
   width: 100%;
   overflow-x: hidden;
   overflow-y: auto;
 }
</style>