页面布局如下
<el-container class="container">
<CommonAside></CommonAside>
<el-container class="r-container">
<CommonHeader></CommonHeader>
<el-main><router-view></router-view></el-main>
</el-container>
</el-container>
el-main的内容滚动时,左侧菜单栏也随着滚动,但是由于设置了菜单栏的高度为100%,当滚动超出页面可视高度时,菜单栏下方为空白。
解决:设置el-main的高度为calc(100vh - 60px),其中60px是header的高度,这样el-main的高度固定后,就可以在自身范围内滚动,而不影响左侧菜单栏。
修改之后