css实现侧边栏

设置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. 第一层

   设计一个高度跟窗口一致，具有一定宽度的侧边栏

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

2. 第二层

   设计一个顶部留出空余空间，供顶部导航栏使用，这里假设顶部导航栏50像素高度

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

3. 第三层

   设计一个去处顶部预留50px空间后的一个完整空间，同时右边留有一个12像素的响应按钮空间

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

4. 第四个

   最终可用的区域

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

5. 第五个

   小按钮

   .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;
   }