终于学会怎么写后台侧列表（隐藏滚动条）

为什么80%的码农都做不了架构师？>>>   

终于学会怎么写后台侧列表（隐藏滚动条）

首先一个标准后台程序有三部分组成：

• 顶部条
• 左侧列表
• 右侧正文内容

现在要求如下：

1. 左侧列表可以滑动，但不可见滚动条
2. 左侧列表滑动时，顶部条不能动
3. 右侧内容区高度不够时，左侧依然可以滑动

实现和办法：

1. 左侧列表和顶部条定位使用position:fixed
2. 左侧列表要使用bottom:0（left:0），否则不能滑动
3. 左侧列表使用overflow-x:hidden;overflow-y:scroll;
4. 左侧列表宽度要和右侧内容的margin-left后对齐，其实就是要用右侧正文内容盖住左侧列表的滚动条而隐藏，而盖住的方式是左侧使用fixed，右侧使用relative。
5. html，body使用height:100%（为满足右侧正文高度）
6. 右侧正文内容区使用height:100%（来撑起高度）
7. 右侧正文内容区使用position:relative;（用来覆盖左侧多余的滚动条）
8. body使用overflow-x:hidden;（非必须）
9. 右侧内容区一定要给个背景颜色，用来盖住左侧滚动条
10. 左侧列表使用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;     /*必须*/

}

 

转载于:https://my.oschina.net/sizeof/blog/693189