终于学会怎么写后台侧列表（隐藏滚动条）
首先一个标准后台程序有三部分组成：
- 顶部条
- 左侧列表
- 右侧正文内容
现在要求如下：
- 左侧列表可以滑动，但不可见滚动条
- 左侧列表滑动时，顶部条不能动
- 右侧内容区高度不够时，左侧依然可以滑动
实现和办法：
- 左侧列表和顶部条定位使用position:fixed
- 左侧列表要使用bottom:0（left:0），否则不能滑动
- 左侧列表使用overflow-x:hidden;overflow-y:scroll;
- 左侧列表宽度要和右侧内容的margin-left后对齐，其实就是要用右侧正文内容盖住左侧列表的滚动条而隐藏，而盖住的方式是左侧使用fixed，右侧使用relative。
- html，body使用height:100%（为满足右侧正文高度）
- 右侧正文内容区使用height:100%（来撑起高度）
- 右侧正文内容区使用position:relative;（用来覆盖左侧多余的滚动条）
- body使用overflow-x:hidden;（非必须）
- 右侧内容区一定要给个背景颜色，用来盖住左侧滚动条
- 左侧列表使用height:100%
简单用代码来写就是：
html,body{
height:100%;
overflow-x:hidden; /*非必须*/
}
.topbar{
position:fixed; /*必须*/
}
.sidebar{
position:fixed; /*必须*/
left:0;
bottom:0; /*必须*/
overflow-x:hidden;
overflow-y:scroll;
width:270px; /*要比右侧的margin-left长*/
}
.contents{
height:100%;
margin-left:250px; /*要比左侧的宽度短*/
position:relative; /*必须*/
}
高亮再演绎一下：
html,body{
height:100%;
overflow-x:hidden; /*非必须*/
}
.topbar{
position:fixed; /*必须*/
}
.sidebar{
position:fixed; /*必须*/
left:0;
bottom:0; /*必须*/
overflow-x:hidden;
overflow-y:scroll;
width:270px; /*要比右侧的margin-left长*/
}
.contents{
height:100%;
margin-left:250px; /*要比左侧的宽度短*/
position:relative; /*必须*/
}
来源：oschina
链接：https://my.oschina.net/u/118996/blog/693189