element侧栏固定，header固定，main主体可以滚动_el-header设置高度

需求

利用elementui的Container 布局容器，布置一个有顶部header，侧边栏aside以及主体main，现要求当主题长度过长时可以滚动，但是顶部和侧边固定。

思路

利用position中的absolute和relative，以及overflow-y来实现

详解

在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
2
3
4
5
6
7

1.为el-header添加样式

.el-header {
        position: relative;
        width: 100%;
        height: 60px;      
    }
1
2
3
4
5

官网el-header默认高度就是为60px；这里为了定位对比，声明一下。

2.为el-aside添加样式

.el-aside {
  display: block;
  position: absolute;
  left: 0;
  top: 60px;
  bottom: 0;
  }
1
2
3
4
5
6
7

3.为el-main添加样式

.el-main {
  position: absolute;
  left: 200px;
  right: 0;
  top: 60px;
  bottom: 0;
  overflow-y: scroll;
  }
1
2
3
4
5
6
7
8

这里主要是relative和absolute，el-header设置为relative，其余两个设置为absolute，相当于el-header 的relative为父级，absolute以它为基准进行位置调整，top：60px就是距离顶部60px，因为el-header高度为60px，el-main的left：200px，因为el-aside默认宽度为200px，这样一来就能完美契合。

关于position的进一步学习可以参考，菜鸟教程里的详解
link

同时还需要给el-main设置垂直滚动

 overflow-y: scroll;
1

这样就实现了固定顶部和侧边栏的效果了。