解决`elementUI`中 `Aside`的横向滚动条以及aside和head固定问题

解决elementUIAside的横向滚动条问题

image-20220407170856689

加上 overflow-x: hidden 即可,

  <el-aside width="200px" style="background-color: rgb(238, 241, 246); overflow-x: hidden">
  		<el-menu>...... </el-menu>
  </el-side>

overflow:scroll会产生x轴和y轴两个方向上的滚动条,
而overflow:hidden会让x和y两个方向上的滚动条都隐藏,
如果只想隐藏x轴的滚动条,就使用overflow-x:hidden,
如果只想隐藏y轴的滚动条,就使用overflow-y:hidden,
————————————————
原文链接:https://blog.csdn.net/u012124764/article/details/51147211

固定 aside 和 head 的方法,即滚动main时,aside和head不随之滚动

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

.el-header {
    height: 60px; //也可以不写,因为默认就是60px大小
}

2、左侧:

.el-aside {
    //height: calc(100vh - 60px);// 设置左侧 aside 高度(aside在屏幕顶端)
    height: 100vh;// 设置左侧 aside 高度(aside在head下面)
}

3、主体:

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

(47条消息) (亲测有效)固定顶部 el-header + 左侧 el-aside 滚动条 + 主体 el-main 滚动条_Rose✿留白ق೨的博客-CSDN博客_el-main滚动条

  • 5
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值