页面侧边栏不溢出加载

首先看一下成品效果。

在网页中侧边栏可以起到很好的导航效果，但是当有很多导航链接时便会产生溢出/出现滚动条。

下面介绍解决办法：

出现了溢出时一般采用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;
}