解决element-ui Container布局的顶部及侧边栏菜单固定，右侧main内容滑动

我的页面布局是用的这种

<el-container class="operation-wrapper">
      <el-aside width="auto">
        <common-aside />
      </el-aside>
      <el-container>
        <el-header>
          <common-header />
        </el-header>

        <common-tag />
        <el-main>
          <!-- 路由出口 -->
          <!-- 路由匹配到的组件将渲染在这里 -->
          <router-view></router-view
        ></el-main>
      </el-container>
    </el-container>

给布局加样式

.operation-wrapper {
  width: 100% !important;
  .el-header {
    // height: 100px;
    padding: 0;
  }
  .el-aside {
    
    height: 100vh;
    overflow-y: auto;
  }
  .el-main {
    padding: 0px 16px !important;
    height: calc(100vh - 200px); 
    overflow-y: auto;
  }
}

注意el-aside收起的时候我之前写的是200px但是收起的时候会有空白，我就改为auto让他自适应，并且要在template的部分去行内书写，我在css部分写不生效。

这是看了博主@PM是山山啊的文章改写的，因为和博主的那个布局用的不是一个用博主的那个博客方法就显示我的系统有了三个活动条并且侧边栏收起后main部分没有变化就会有很大一片空白。如果和博主@PM是山山啊的布局是一样的可以去看看原博主的博客解决问题