首先看一下成品效果。
在网页中侧边栏可以起到很好的导航效果,但是当有很多导航链接时便会产生溢出/出现滚动条。
下面介绍解决办法:
出现了溢出时一般采用overflow: hidden来解决,这里也是一样。在侧边栏的容器外再嵌套一层容器,外部容器设置overflow: hidden,包裹容器设置overflow-y: scroll; overflow-x: hidden;
此时内部容器由于内容溢出会产生滚动条,但是会被最外层容器隐藏掉。
接下来设置外部容器的宽度小于包裹容器的宽度,让鼠标事件成功作用于包裹容器身上即可。
<div class="left">
<div class="hide">
<el-menu>
<!-- 侧边栏内容 -->
...
<!-- 侧边栏内容 -->
</el-menu>
</div>
</div>
.left{
width: 300px;
overflow: hidden;
background-color: #545c64;
max-height: 100vh;
}
.hide{
width: 350px;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
再介绍一个overflow相关的属性,overflow:auto。
当主界面内容过多,向下滚动时,可以发现侧边栏也随之滚动,并没有以高度100%的形式固定在左侧。
此时在右侧主内容区域外侧套上一层div,为这个div设置overflow:auto后,这片区域形成独立的滚动条,侧边栏也可以成功固定。
<div class="right">
<div class="content"></div>
</div>
.right{
width: calc(100% - 300px);
overflow: auto;
}
.content{
height: 2000px;
background-color: #000;
}