（亲测有效）固定顶部 el-header + 左侧 el-aside 滚动条 + 主体 el-main 滚动条

Posted 2022-01-29 Rose✿留白ق೨

在elementui官网复制Container 布局容器布局，代码如下：

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

代码呈现效果：

然而官方布局效果并不理想，于是做一些修改。

1、头部设置为固定高度：

.el-header 
    height: 70px;

2、左侧：

.el-aside 
    height: calc(100vh - 70px);// 设置左侧 aside 高度

vh就是当前屏幕可见高度的1%。
因此，100vh就等于当前浏览器的视窗高度，即浏览器内部的可视区域的高度大小。

3、主体：

.el-main 
    padding: 0;
    height: calc(100vh - 70px);// 设置主体 main 高度

总结：
1、不需要定位，只要设置高度固定，滚动条就分别出现在各自部位，头部就固定了。
2、不建议加 !important ，可能会影响到其他地方nav组件的样式。

本文参考自文章：固定顶部 el-header + 左侧 el-aside 滚动条 + 主体 el-main 滚动条