  #page{
    height: 100%;
    .navbar{
      width: 100%;
      height: 50px;
    }
    #start{
      width: 100%;
      height: calc(100% - 50px);
      .blocs{
        overflow-y: auto;
        &:nth-child(1){
          background: red;
        }
        &:nth-child(2){
          background: pink;
        }
        &:nth-child(3){
          background: brown;
        }
        &:nth-child(4){
          background: blue;
        }
        &:nth-child(5){
          background: green;
        }
        &:nth-child(6){
          background: yellow;
        }
      }
    }
  }

.top{
  height: 50%;
}
.top, .bottom{
  display: inline-grid;
    grid-template-columns: auto auto auto;
}
.handler{
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: blue;
  position: absolute;
  left : calc((100%/3) - 25px);
  top: 50%;
  z-index: 999;
}

//
// #start{
//   height: 100%;
//   & > div {
//     position: fixed;
//     height: 100%;
//   }
// }

.bottom{
height: 100%;
position: fixed;
  & > div{
    position: fixed;
    width: calc(100%/3);
    top: calc(100%/2 + 25px);
    height: calc(100%/2 - 25px);
    bottom: 0;
    &:nth-child(2){
      left: calc(100%/3);
    }
    &:nth-child(3){
      right: 0;
    }
  }
}
