css實(shí)現(xiàn)側(cè)邊欄

設(shè)置html,body高度

html,
body {
    height: 100%;
}

html代碼

<div class="nav-sidebar">
    <div class="sidebar-main">
        <div class="sidebar-content">
            <div class="sidebar-doc"></div>
            <div class="sidebar-btn"></div>
        </div>
    </div>
</div>

1. 第一層

   設(shè)計(jì)一個(gè)高度跟窗口一致，具有一定寬度的側(cè)邊欄

   .nav-sidebar {
       position: absolute;
       top: 0px;
       height: 100%;
       width: 260px;
       z-index: 1000;
   }
   

2. 第二層

   設(shè)計(jì)一個(gè)頂部留出空余空間，供頂部導(dǎo)航欄使用，這里假設(shè)頂部導(dǎo)航欄50像素高度

   .sidebar-main {
       position: absolute;
       display: inline;
       width: 100%;
       height: 100%;
       padding-top: 50px;
   }
   

3. 第三層

   設(shè)計(jì)一個(gè)去處頂部預(yù)留50px空間后的一個(gè)完整空間，同時(shí)右邊留有一個(gè)12像素的響應(yīng)按鈕空間

   .sidebar-content {
       position: relative;
       width: 100%;
       height: 100%;
       padding-right: 12px;
   }
   

4. 第四個(gè)

   最終可用的區(qū)域

   .sidebar-doc {
       height: 100%;
       background-color: rgb(132, 156, 156);
   }
   

5. 第五個(gè)

   小按鈕

   .sidebar-btn {
       position: absolute;
       display: inline;
       float: left;
       height: 56px;
       width: 12px;
       right: 0;
       top: 0;
       border: 0;
       background-color: #e5e5e5;
       border-radius: 0 5px 5px 0;
       cursor: pointer;
   }