使用css为模块如div 添加滚动条

div 加滚动条的两种方法

overflow:hidden;
overflow:scroll;

一、注意

记住宽和高一定要设置噢，否则不成的

不过在不超出时，会有下面的滚动条，所以不是最好的选择

二、HTML

<div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div>

记住宽和高一定要设置噢，否则不成的

这样比较好的是，在宽和高不超出时，只是一条线

三、说明

直接为div指定overflow属性为auto即可，但是必须指定div的高度，如下：

• 如果要出现水平滚动条，则： overflow-x:auto
• 同理，垂直滚动条为： overflow-y:auto
• 如果该div被包含在其他对象例如td中，则位置可设为相对：position:relative

四、两种方案
(1)方案一：自定义滚动条通用className="scrollbar"：

  /*滚动条整体样式*/
  .scrollbar::-webkit-scrollbar {
    /*高宽分别对应横竖滚动条的尺寸*/
      width: 10px;    
      height: 1px;
  }
  .scrollbar::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius:0 2em 2em 0;
    background-color: #C0B7F5;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, 
    transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  }
  .scrollbar::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius:0 2em 2em 0;
    background: #EDEDED;
  }

(2)方案二：自定义滚动条通用 .scroll (); ：

 // 滚动条
  .scroll {
    &::-webkit-scrollbar {
      width: 10px;
      overflow: hidden;
      border-radius: 0 18px 18px 0;
      background: rgba(219, 219, 219, 1);
    }
    &::-webkit-scrollbar-thumb {
      border-radius: inherit;
      background-color: rgba(192, 183, 245, 1);
    }
  }

css让div撑满浏览器高度的原生方法

CSS自带的两个单位vw与vh就能支持与浏览器等高等宽的效果，完全可以抛弃js

.fullbg {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.inner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
}

我在美化WordPress目录栏的实操

原图：

当前的目录边栏是固定的，长度超出时直接GG，后面的内容就看不到了，可称之为bug,最好的办法还是加一个滚动条

操作如下：

效果：