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

最新推荐文章于 2025-06-18 16:54:13 发布

别掉头发了小李

最新推荐文章于 2025-06-18 16:54:13 发布

阅读量5.7k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/chongyang_/article/details/124021925

Vue 专栏收录该内容

2 篇文章

订阅专栏

解决Element UI中Aside组件的横向滚动条问题，只需添加`overflow-x:hidden`样式。同时介绍了如何实现固定头部（el-header）和侧边栏（el-aside），在滚动主要内容（el-main）时保持它们不滚动的布局方法。通过设置头部固定高度、aside的100vh高度以及main的适配高度，可以达到预期效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决elementUI中 Aside的横向滚动条问题

加上 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.youkuaiyun.com/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✿留白ق೨的博客-优快云博客_el-main滚动条