解决element-plus侧边栏组件el-menu不占满可视窗高度的问题

解决问题:el-menu右边的border-right显示高度不全, 如下图所示。

解决element-plus侧边栏组件el-menu不占满可视窗高度的问题_第1张图片

我的情况是上面有个logo 下面是el-menu组件,如果按照网上的给el-menu设置height: 100vh; 或者类似的方法,则会出现滚动条,因为我的logo有固定高度。

如果按照网上的方法设置结果如下,会出现滚动条,刚好空出我的logo高度,下面是在游览器工具layer里面看到的效果。

我的解决办法很简单, 父盒子使用使用弹性盒子布局属性,el-menu给 flex:1; 的样式,也就是自动占满剩余空间即可。

样式设置:

解决element-plus侧边栏组件el-menu不占满可视窗高度的问题_第2张图片

页面效果:

解决element-plus侧边栏组件el-menu不占满可视窗高度的问题_第3张图片

你可能感兴趣的:(vue.js,前端,elementui)