内容超出页面，没有都显示出来，el-scrollbar就不滚动了

朋友们，今天用element时候，这个菜单栏，菜单展开后，内容就变多了嘛，他就超出页面了，然后el-scrollbar这个组件，滚动了，但只滚动了一部分，就是展开后的菜单还没有都出现在页面中，他就滚动不了了，高度给的100%，怎么解决呀

overflow:hidden去掉

这篇文章讲的很详细，请看：element的隐藏组件滚动条el-scrollbar使用亲测有用~
除此之外, 这篇博客: 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