屏幕vue首页进去菜单页跑到侧边栏了,怎么恢复原状

上一节搭好了主框架但是标签頁和侧边栏只是分别展示了各自的vue首页进去菜单页,如何将二者联动起来

该路由的 children 有2个子路由,我期望生成如下vue首页进去菜单页:

前端小白第一份博客上线

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

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

  1. 在缩放屏幕的时候监听到屏幕大尛的变化, 侧边栏的状态跟着改变

我要回帖

更多关于 css3菜单 的文章

 

随机推荐