Element-UI 导航菜单，部分贴底

如下图，导航一二三四的高度小于 100% 时，接口文档贴底，大于 100% 时，接口文档显示在最底端。

其实类似于 Footer Stick，但是由于导航菜单子组件的某些属性，已有的 Footer Stick 解决方案并不能解决我遇到的这个问题。

// template
  

    
      
        
        
          
          选项1
          选项2
        
        
          选项3
        
        
          
          选项1
        
      
      
        
        导航二
      
      
        
        导航三
      
      
        
        导航四
      
+      
+      

+      
+        
+          
+          接口文档
+        
+      
    
  

.sidebar {
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    width: 0;
  }
  .sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
    display: flex;              // 注意
    flex-direction: column;     // 注意
  }
  > ul {
    height: 100%;
    .doc {
      flex: 0 0 56px;           // 注意
      box-sizing: border-box;
      display: block;
      width: 100%;
      height: 100%;
      align-items: center;
      font-size: 14px;
      color: #fff;
      > .icon {
        width: 24px;
        font-size: 18px;
        vertical-align: middle;
        margin-right: 5px;
      }
    }
  }
}