在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 滚动条

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐