vue项目中容器布局自动撑满和盒子内容超出隐藏滚动条

没有大佬带的日子，一点点摸索和笔记把！

需要实现如下布局

代码如下：

 

样式代码如下：

.layout-container {
  width: 100%;
  height: 100%;
  .layout-header {
    width: 100%;
    height: 64px;
  }
  .layout-content {
    width: 100%;
    position: absolute;
    top: 64px;
    bottom: 0px;
    .layout-aside {
      width: 256px;
      height: 100%;
      float: left;
      overflow: auto;
    }
    .layout-main {
      margin-left: 256px;
      height: 100%;
      overflow: auto;
    }
  }
}

 

 当侧边栏内容没有撑满整个容器时，样式都正常

 

 当我们侧边栏内容撑满整个容器时，出现了滚动条，此时从没有滚动条到有滚动条之间切换，视觉效果不佳。如何隐藏滚动条呢？

 

 我们找到滚动条出现得元素位置，这里是   .layout-aside   样式元素里，我们增加样式属性

 

　　&::-webkit-scrollbar {
      display: none; // 滚动条隐藏
    }

为了兼容火狐和IE等，具体样式如下：

.layout-aside {
    width: 256px;
    float: left;
    height: 100%;
    overflow: auto;
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
    &::-webkit-scrollbar {
      display: none; // 滚动条隐藏
    }
}

在运行项目，滚动条被隐藏了。