头部固定，侧边栏和主体有各自的滑轮怎么实现？

Question

<div class="appWrap">
    <div class="base_header">
    </div>
    <div class="base_main">
    </div>
</div>

.appWrap {
  position: relative;
  .base_header{
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 40px;
    background: #1ABDE6;
    z-index: 9;
  }
  .base_main{
    position: relative;
    width: 100%;
    height: 100% ;
    margin-top: 40px;
  }
}

这样会出现全局的滚动条，到header。请问应该怎么布局？

Answer 1

.base_main{

position: relative;
width: 100%;
height: calc(100% - 40px) ;
margin-top: 40px;

}

Answer 2

主体和 侧边栏都写死高度，分别设置overflow: scroll
哪个不是滑轮 叫滚动条啦