【实例总结】fixed定位元素内部滚动显示

布局如下：

灰色div是grayBox

粉色div是pinkBox

绿色div是greenBox

.grayBox {
    position: fixed;
    top: 0;
    right: 0;
    width: 430px;
    height: 100%;
    transition: all .3s;
    z-index: 99;  
}
.pinkBox {
    width: 20px;
    left: 0;
    position: absolute;
    height: 100%;
    background: -webkit-linear-gradient(left,#d6d6d6, #f6f6f6);
    background: -o-linear-gradient(left,#d6d6d6, #f6f6f6);
    background: -moz-linear-gradient(left,#d6d6d6, #f6f6f6);
    background: linear-gradient(left,#d6d6d6, #f6f6f6)  
}
.greenBox {
    margin: 15px 15px 0 20px;
}

 

此时greenBox内容长度大于grayBox长度，因此想在greenBox中添加一个滚动条以显示多出的内容，类似layui中的如下效果：

 

然而无论如何，都不能使滚动条出现，要么就是滚动条出现了但是多出的内容不会显示，后来将greenBox样式修改为：

 

.greenBox {
    /* position: relative; */
    overflow: scroll;
    height: 100%;
}

加了两个属性：overflow和height，就达到效果了，特在此做下笔记