解决element-ui侧边菜单栏高度占满屏幕

前端小白第一份博客上线

element-ui

最近写项目,有一个界面用element NavMenu 导航菜单写了侧边栏,如图
解决element-ui侧边菜单栏高度占满屏幕_第1张图片
可以发现这个侧边栏(红色区域)的高度,是动态的,也就是说它是根据接口返回的数据长度来显示的,有多少条数据高度就是多少
只有两三条的时候就是上图所示,占不满屏幕
如果是很多条的话,左侧部分高度就会一直撑开,这样界面看起来就很突兀

我想要的是,高度一直占满屏幕
比如数据量过少不够占满屏幕时,如下图
解决element-ui侧边菜单栏高度占满屏幕_第2张图片
或者数据过多的话,在内部形成滚动条,如下图
解决element-ui侧边菜单栏高度占满屏幕_第3张图片
尝试了多次,最后找到了解决方法:
首先,需要给整个页面一个高度100%
解决element-ui侧边菜单栏高度占满屏幕_第4张图片
然后在html文件中,我是给整个侧栏组件外面再包一个盒子,就是下图中class="left_menu"的,然后按照下图标注的红色区域实现就可以达到效果
注:下图标注的红色区域,这四个部分一定都要加上高度100%的样式,少一个就没有效果了!!而且只能是行间样式!!(我有尝试过加在css文件中,没效果)
解决element-ui侧边菜单栏高度占满屏幕_第5张图片
新手小白,如有不对的地方,请多多指教!

你可能感兴趣的:(解决element-ui侧边菜单栏高度占满屏幕)