終於學會怎麼寫後臺側列表（隱藏滾動條）

終於學會怎麼寫後臺側列表（隱藏滾動條）

首先一個標準後臺程序有三部分組成：

• 頂部條
• 左側列表
• 右側正文內容

如今要求以下：

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;     /*必須*/

}