解决Element-Plus使用了布局容器后，侧边栏高度设置100%却没有撑开高度

最新推荐文章于 2024-06-06 23:29:40 发布
最新推荐文章于 2024-06-06 23:29:40 发布
阅读量2k 收藏 2
点赞数 6
分类专栏： 开发时遇到的bug+解决方法 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61769998/article/details/127397507
版权

设置.el-menu的高度为100vh即可解决。

<style lang="less" scoped>
.el-menu{
    height:100vh
}
</style>

效果展示，侧边栏高度已完全撑开，占据全屏：
在这里插入图片描述

A_ugust__
关注
  • 6
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue2+element-ui,el-aside侧边栏容器收缩与展开源码
02-17
在Vue2和Element-UI框架下，开发一个具备el-aside侧边栏容器收缩与展开功能的应用是一项常见的任务。Element-UI是基于Vue2的组件库，提供了丰富的UI组件，其中包括el-aside，用于创建侧边栏布局。下面将详细阐述实现...
element-plus-2.2.12 本地资源文件
08-01
element-plus-2.2.12 本地资源文件，适用于Vue 3编程，是流行的Vue 3的组件库。 资源适用于离线开发，内网使用。 （本资源为 element-plus-2.2.12 保存而来，如有侵权请联系我删除。）
关于vue使用Element Plus框架的时候，使用Menu菜单的时候，遇到了一些问题，解决了
weixin_46212682的博客
12-14 5364
关于vue使用Element Plus框架的时候，使用Menu菜单的时候，遇到了一些问题，解决了
elementplus Container 布局容器无法铺满整个页面的解决方案
panwanpeng的专栏
12-28 1170
网上找的方法都太绕了，暴力解决办法就是修改style文件：
element plus的容器组件
最新发布
lucky_ly的博客
06-06 208
el-container采用flex布局，如果其子元素包含el-header或el-footer时会采用垂直布局，否则会采用水平布局，可设置其direction属性为’horizontal’ | ‘vertical’。element-plus的容器组件主要有el-container,el-aside,el-header,el-main,el-footer,后面4个组件其父组件必须是el-container。el-aside为侧边栏组件，可设置其width属性。el-header为头部容器。
element-ui height:100%不生效解决方案
qq_52822043的博客
05-06 3520
在使用element-ui组件时，想要侧边栏的高度占满屏幕的左侧边栏，单纯在样式中设置了height:100%，然而并不生效。 .el-menu { height: 100%; border: none; h3 { color: #fff; text-align: center; line-height: 48px; } } 解决方案： 当想要元素铺满整个屏幕的时候，采用绝对定位或者固定定位 定位+width：100%
element UI中Container布局容器自动填充满屏
hyment的博客
03-20 2199
element UI 设置容器布局时候比较方便，但如果设置不好会出现中间内容无法填充满整个屏幕剩余空间的问题，很可能会导致footer组件悬空在屏幕中间位置，不美观。如果aside 和main的父组件不是container，而是el-row，那么需要额外设置el-row的高度为100%。aside和main要在同一个水平位置，可以使用一个el-container或者一个el-row 都可以。简单测试可以发下， 如果不设置top等，上面布局的元素都会缩在一起，无法实现满屏效果。
使用elementui做后台管理系统，el-aside(el-menu)与el-main高度不一的问题，实现el-aside(el-menu)占满整个页面，以及实现多级菜单。
qq_51758070的博客
08-23 6927
先来看看问题1：（实现el-menu占满整个页面）这是el-menu没有设置高度出现的问题这是将el-menu这块高度设置为100vh，出现的问题最后，解决问题 ，如图 在App.vue中，添加以下代码 在布局文件中，也就是在以下文件中，给container类添加戴拿 最后，也就是在el-main里面，即TabInner里面添加以下代码 问题2：实现多级菜单做法：遍历从父组件传过来的menuData数组数据（菜单栏数据），如果数据里有children属性，则建立一个父级菜单名，并再次循环去判断
解决element-plus侧边栏组件el-menu不占满可视窗高度的问题
qq_44886882的博客
07-27 4368
解决element-plus侧边栏组件el-menu不占满可视窗高度的问题。
Element plus 页面顶部空白的问题
y523648的博客
11-22 153
问题如下图，无论是设置height 100%, 或者margin , 页面顶部始终有空白。body和 div#app的高度相差了200，而它们之间并没有其他元素。
element-plus(element-plus@2.5.5) 本地离线资源
02-05
element-plus@2.5.5 本地离线资源，适用于没有网络连接、搭建自己的cdn等用途。 All files（包含文件） /npm/element-plus@2.5.5/dist /npm/element-plus@2.5.5/es /npm/element-plus@2.5.5/lib /npm/element-...
element-plus离线文档
05-07
Element Plus 的文档详细介绍了每个组件的功能、用法、属性、事件和槽等内容，涵盖了布局、表单、按钮、表格、通知、弹出框等常见的前端元素。在使用 Element Plus 构建项目时，这些文档是开发者的重要参考资料。 ...
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
对于小白来说怎么在Vuedraggable里使用element组件提供了实际应用参考。table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖：npm i -S vuedraggable@next
el-menu菜单栏高度超过100%，部分菜单被隐藏
晨曦月的博客
01-08 6374
element-ui 中el-menu，很好使用，但是最近出现一种情况：当菜单栏都收缩起来的时候，height 100%是没问题的，但是当菜单栏全部打开，会出现100%不够的感觉，部分菜单被隐藏。 怎么解决呢？ 首先 html ，body的高度都设置下100%； 然后左边栏menu的高度menuCon 设置height100%不行，需要改成 calc(100% - 40px) ，其中40px是...
一个样式解决element-ui侧边栏组件el-menu占不满屏幕的问题
e274426380的博客
09-23 5884
网上解决这个问题的方法都非常麻烦，比如加很多很多高度100%，而有些人又没法复现这种成功。 在这里分享一个新属性给大家试试，非常有效 height:100vh vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; 但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0， https://blog.csdn.net/qq_16687863/article/details/100516013 但是设置height:100vh，该元素
elementui踩坑之table组件宽度自适应导致右边空白
weixin_46106673的博客
07-05 1847
在使用elementui中table组件时，设置el-table宽度为100%，当表格列数过少时，右边区域出现空白区域，导致页面展示不美观，因此需要设置最右边的列（el-table-column）的最小宽度，注意不是width，而是min-width。同时其他列不要设置min-width，否则会导致内容只会显示在最开始加载的宽度范围内，一旦通过拖拽来加大列宽，内容显示区域不变。
解决element-ui侧边菜单栏高度占满屏幕
热门推荐
starstarss的博客
03-10 3万+
element-ui侧边导航栏高度占满屏幕 前端小白第一份博客上线 element-ui 最近写项目，有一个界面用element导航栏组件写了侧边栏，如图 但是发现这个侧边栏（红色区域）的高度，是动态的，也就是说有多少条数据就显示多少 只有两三条的时候就是上图所示，如果是很多条的话，高度就会自动撑开 但是这样界面看起来很突兀，我想要的是，高度一直占满屏幕，多条菜单数据的话，在内部形成滚动条，如下...
【element-ui】el-form-item 内的 el-select如何自适应宽度
weixin_48583165的博客
04-27 1万+
问题：想让el-select自适应宽度，即 label宽度 + el-select宽度可以填满一行，想要实现这样的效果 详细描述：项目中的代码如下，给 el-select 设置了 style=“width:100%” 没有作用，不论布局是变大变小，el-select 的宽度都不会有变化，就像下图所示 我只有在el-select中设置固定的值如 style="width:100px"才有作用。下面是我的代码，不知道是不是我对width的设置方法有错 <el-form :inline=“true”
element-plus侧边栏折叠
12-01
以下是使用element-plus实现侧边栏折叠的示例代码： ```html <template> <div class="container"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse"> <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">选项4-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"> <i class="el-icon-setting"></i> <span slot="title">导航三</span> </el-menu-item> </el-menu> </el-aside> <el-main> <el-button type="primary" @click="toggleCollapse">{{isCollapse ? '展开' : '折叠'}}</el-button> </el-main> </div> </template> <script> export default { data() { return { isCollapse: false } }, methods: { toggleCollapse() { this.isCollapse = !this.isCollapse } } } </script> <style> .container { display: flex; height: 100vh; } .el-aside { height: 100%; overflow: hidden; } .el-menu-vertical-demo { height: 100%; } .el-main { flex: 1; padding: 20px; } </style> ``` 在这个示例中，我们使用了`el-aside`和`el-menu`组件来实现侧边栏，其中`el-menu`组件的`collapse`属性用于控制菜单的折叠状态。我们通过点击按钮来切换`isCollapse`的值，从而实现侧边栏的折叠和展开。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

A_ugust__

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值