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

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

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

pintu.png

// template
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      :collapse="collapse"
      :background-color="'#324157'"
      :text-color="'#fff'"
      :active-text-color="'#20a0ff'"
      unique-opened
      router
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
+      <!-- 空元素用来让接口文档部分贴底 -->
+      <li style="flex:1;"></li>
+      <el-menu-item>
+        <router-link to="/doc" target="_blank" class="doc">
+          <i class="el-icon-tickets icon" style="'color:#455368'"></i>
+          <span>接口文档</span>
+        </router-link>
+      </el-menu-item>
    </el-menu>
  </div>
.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;
      }
    }
  }
}
Image placeholder
龙卷风
未设置
  59人点赞

没有讨论,发表一下自己的看法吧

推荐文章
如何用css做导航栏?

如何用css做导航栏?1、新建一个html文件,在head部分,编写css样式○list-style-type:none;是除掉导航前面默认带的点○lia,lia.active,lia:hover:n

9款CSS菜单生成器

9款CSS菜单生成器:1、来自Webmaster-toolkit的CSS菜单生成器。有3种菜单风格可以选择,可以设置菜单文本的颜色,悬浮颜色,背景颜色和背景悬浮颜色,文本字体和大小以及文本的名字和链接

如何绑定一二级菜单

二级菜单的pid为一级菜单的idforeach判断pid是否为0为0输出数组,并遍历pid为当前父级id,同时输出数组

解放劳动力,拒绝crud【基于element-ui的表格模版】

缘起在开发后台管理系统页面时,用得最频繁的莫非:表格+表单+分页+搜索。常规操作流程: 表格组件 分页组件 弹出层组件+表单组件一套 搜索栏表单组件一套 一把梭下来写了很多样版式代码,风格可能还不统一

element-ui tree懒加载时获取节点DOM

tree提供的方法貌似没有可以直接获取节点DOM,或者点击勾选节点响应函数参数node其实只是传入data的数据对象,拿不到DOM,得想想法子来获取之事情是这样的:最近做一个表单,要能勾选一个二级的下

笔记:element固定表头的表格,如果表格太宽了拉到最右侧会出现表头和内容不对齐的情况

在顶级样式文件里面加下面的代码.el-table--borderth.gutter:last-of-type{ display:block!important; width:8px!important

解决Element UI input输入框不能使用回车进行搜索

因为使用vue修饰符绑定键盘事件报错,不知道怎么解决...所以想出了一个神奇的解决方法...1、绑定输入事件,每次输入就把输入的内容存到本地储存 //输入搜索内容 inputSearchInfo(

leveldb源代码分析系列1:MemTable的实现

MemTable及其实现这是一个第零层的主题,预计扩展如下第一层主题:1.1comparator介绍1.2skiplist实现介绍1.3数据压缩相关介绍1.4Put流程1.5Get流程leveldb中

leveldb源代码分析系列1.1:memtable中comparator的实现

leveldb中memtable封装了一个skiplist用来存储真正的数据,跳跃列表的实现一定需要定义存储项的序关系,而在leveldb中这个序关系通过comparator相关类来实现。leveld

Laravel 底层分析:生命周期和容器 Container(第一部分)

本篇用于介绍Laravel5.6底层源码 最早加载的文件 一旦你打开某个网站,比如http://example.com,你的Web服务器(nginx,Apache,...)首先指向的是public目录

10亿美元!苹果收购Intel大部分芯片业务,晚半步布局5G芯片能赶上华为高通么?

大数据文摘出品作者:易琬玉、曹培信2200名英特尔员工,17000项无线技术专利,伴随着苹果在今天凌晨官宣收购英特尔大部分5G基带业务,都将逐渐流向苹果。这也意味着,继高通、华为、三星、联发科、紫光展

从 simplemde 写入 + inline-attachment 图片拖拽上传 到 parsedown 解析

###准备工作安装富文本编辑器sparksuite/simplemde-markdown-editor yarnaddsimplemde--save 安装markedjs/marked,在JS中解析

Drive.ai轰然倒下:曾估值两亿,吴恩达夫妇站台,苹果将接盘部分可用技术人才

大数据文摘编辑部出品曾经估值两个亿美元,吴恩达夫妇亲自站台,风极一时的无人车创业公司Drive.ai轰然倒塌。本月20日,总部位于加州山景城的Drive.ai公司被证实已经向一家州政府机构递交了通知,

美埃默里大学华人实验室突遭关闭,两华人教授及部分中国雇员被强制遣返

大数据文摘出品作者:魏子敏、宋欣仪据美《科学》杂志报道,佐治亚州亚特兰大的埃默里大学(EmoryUniversity)突然关闭了知名华人生物学家李晓江和李世华教授夫妇的实验室。22日,埃默里大学解雇了

三个月5位老员工离职!苹果健康团队被曝内部分歧严重,员工扎堆儿离开

大数据文摘编辑部出品一年一度的秋季发布会召开前夕,苹果健康团队忽然被曝,大批老员工高调离职。据外媒CNBC报道,最近几个月,苹果的医疗保健团队紧张氛围愈加严重,这种氛围据内部人士称已经持续了一段时间,

甲骨文裁员,N+6 赔偿……部分员工不满

本文转自|猿记据多家媒体昨日报道,5月7日上午甲骨文召开了面向全中国区的电话会议,亚太区人力资源负责人在会上简要介绍道,公司正进行业务结构调整,导致一部分人要离开岗位,这将是全球性的。据悉,此次主要裁

B站工程源码泄露,Github标星9k+,内含部分用户名密码

大数据文摘出品作者:蒋宝尚、宋欣仪昨儿个,文摘菌日常在B站上看看本山大爷的视频,听听吴亦凡的大碗面。突然弹幕画风突变,评论区集体喊话B站,“你家后院着火了”。原来,Bilibili的网站后台源码被发到

为什么大部分人做不了架构师?这2点是关键

阿里妹导读:选择有时候比努力重要,真正厉害的人不仅仅是埋头苦干,而是会利用好的思维方式、好的方法,看穿事物的本质,顺势而为,找到事情的最优解,并懂得举一反三。架构师是程序员的目标之一,但大多数程序员无

注释部分笔记

点击下方截图可插入当前视频播放画面,了解更多Mackdown语法可以点击上方?图标

【MySQL实战45讲】索引部分整理

本文摘抄自极客时间【MySQL实战45讲】为什么要有索引?索引的作用是什么?索引的出现其实就是为了提高数据查询的效率,就像书的目录一样。一本书我们可以通过目录中快速的定位其中的某一个知识点;对于数据库

css语法由哪三部分组成?

CSS语法由三部分构成,分别:选择器、属性和值。selector{property:value} 选择器{属性:属性值}选择器(selector)通常是你希望定义的HTML元素或标签,属性(prope

【读书笔记】计算广告(第2部分)

作者:LogM本文原载于https://segmentfault.com/u/logm/articles,不允许转载~本文是计算广告(第二版)的读书笔记。该部分介绍在线广告产品的逻辑,面向产品、运营、

electron+vue实现div contenteditable功能|截图

最近在学习基于electron+electron-vue开发聊天客户端项目时,需要用到编辑器插入表情功能。一般通过input或textarea也能实现,通过插入[笑脸]、(:12这些标签,展示的时候解

“What‘’s your problem?”李彦宏被泼冷水后问道

本文综合自网络7月3日上午,2019年百度AI开发者大会举行,百度CEO李彦宏演讲开场。在演讲过程中,有个观众突然冲上演讲台,向李彦宏头部倒了一瓶水。李彦宏先是一愣,后来用英语问道:What’syou