Element UI设置侧边栏高度占满全屏,Y轴滚动条隐藏,不影响滚动
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
先看效果:实现了高度占满全屏,隐藏滚动条,但可以滚动
这里采用的是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其实是会出现滚动条的,所以不影响鼠标的滚动效果,而且我们看不到滚动条了。
设置 .aside 比 el-aside 宽度小,
.aside {
width: 160px;
background-color: #0080c9;
overflow: hidden;
}
.el-aside {
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)