el-scrollbar滚动条，根据浏览器窗口比例动态设置父盒子高度

el-scrollbar滚动条根据浏览器窗口比例动态设置父盒子高度

我们都知道el-scrollbar是存在于饿了么源码中的一个功能组件，我们在网上也可以找到很多关于它的基本用法。但无一不强调，父盒子要有固定的高度。

<div  style="height : 200px  ">
  <el-scrollbar style="height : 100% " >

那么在浏览器视口中可能会出现一种情况，100%缩放时，因为空间不够，应用了滚动条。

由于是工作内容，，便只截取部分，请见谅。

而当浏览器视口缩放为更小时，比如80%，50%，那么我们就有了足够的空间显示全部内容。

下面的红色空间本足够显示滚动条隐藏内容，却被浪费了，也非常不美观。

受限于el-scrollbar，我们无法为父盒子设置百分比高度，所以我们便可以尝试vue中用动态绑定的方式来赋予高度。。

<div :style="{height : slbHeight } ">
 <el-scrollbar style="height : 100% " class="clb" >

data() {
      return {
        clientHeight:'',//浏览器可视区域高度
        slbHeight:''
      }
    }

我们在这里需要获取浏览器可视区域高度，然后减去滚动条上边的所有内容的高度（如果下边也有其他内容，那么按实际情况去计算）

mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}`;//获取浏览器可视区域高度
      let that = this;
      window.onresize = function(){
        this.clientHeight =  `${document.documentElement.clientHeight}`;
        that.slbHeight = this.clientHeight - 480 + 'px';
      }
    },

考虑到浏览器窗口缩放会有随时变化的可能，所以我们可以进行监听

watch: {
      clientHeight(){     //如果clientHeight 发生改变，这个函数就会运行
        this.changeFixed(this.clientHeight)
      }
    },

methods: {
      changeFixed(clientHeight){
          this.slbHeight = clientHeight -480 + 'px';
      },
   }

这样，我们就完成了对父盒子高度的动态赋值。

如有新的想法，欢迎在此分享，本人前端新鲜小白菜，浅薄总结，愿共同进步提示。

此文章借鉴了https://blog.csdn.net/weixin_30830327/article/details/98374237