(亲测有效)固定顶部 el-header + 左侧 el-aside 滚动条 + 主体 el-main 滚动条
在elementui官网复制Container 布局容器布局,代码如下:<el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-main>Main</el-main
·
在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组件的样式。
更多推荐
已为社区贡献3条内容
所有评论(0)