Element UI设置侧边栏高度占满全屏,Y轴滚动条隐藏,不影响滚动

先看效果:实现了高度占满全屏,隐藏滚动条,但可以滚动
在这里插入图片描述

这里采用的是Element UI的Container布局,使用文档中给出的举例解决了aside和main的独立滚动条效果。

布局:
在布局上采用的就是文档给举例的布局,然后在el-aside外套了一个div.aside,用于设置隐藏滚动条。

<!-- 侧边栏 -->
<div class="aside">
  <el-aside width="178px">
    <!-- 侧边导航 -->
    <el-menu background-color="#0080c9" text-color="#ffffff" router>
    </el-menu>
  </el-aside>
</div>

样式:

首先设置高度占满全屏,需要将el-aside的所有父级设置为height : 100%,尤其是html、body、el-container

// 设置高度占满全屏  html,body,#app,.el-container,.el-aside都要设置height:100%;
html,
body,
#app,
.el-container {
  height: 100%;
}

这时侧边栏就占满全屏了,但是当导航内容超出窗口时会出现滚动条

隐藏滚动条原理是:

在div外面再套一个div。外层div设置overflow:hidden

而内容div设置 :
overflow-y: scroll;
overflow-x: hidden;

然后再设置外层div的width小于内层div的width。
这时内层div其实是会出现滚动条的,所以不影响鼠标的滚动效果,而且我们看不到滚动条了。

设置.asideel-aside宽度小,

.aside {
    width: 160px;
    background-color: #0080c9;
    overflow: hidden;
 }
.el-aside {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
 }

版权声明:本文为ZPD_zpd原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。