零、参考

https://github.com/creativetimofficial/vue-light-bootstrap-dashboard

一、实战解析

分解：外层wrapper + 左边的sidebar + 右边的main-panel

0.全局样式

0.1滚动条样式(仅限chrome)：https://www.jianshu.com/p/bbd62666cb62
【selector::-webkit-scrollbar可以选择对应的滚动条】

1.wrapper

1.1高度设置为视窗的100%

height: 100vh

2.sidebar

2.0基础样式

overflow:auto; /*内容溢出会出现滚动条*/
width: 260px; /*设置了宽度*/
。。。

2.1给sidebar添加蒙版效果（阴影百搭配色）

/*给sidebar添加蒙板效果*/
.sidebar:before, .sidebar:after{
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}
.sidebar:before{
    opacity: .33;
    background: #000;
}
.sidebar:after{
    opacity: .33;
    background: linear-gradient(180deg,#292929,#0e0e0e);
    background-size: 150% 150%;
}

3.main-panel

~CSS的HSLA色彩模式：https://www.cnblogs.com/zhoushengxiu/p/5710691.html

background: hsla(240,7%,81%,.15);
position: relative;
float: right; /*右浮动*/
width: calc(100% - 260px); /*算出去掉sidebar后生剩下的宽度*/
。。。