elementui内置navmenu组件如何占满高度

最新推荐文章于 2023-06-17 17:45:39 发布
最新推荐文章于 2023-06-17 17:45:39 发布
阅读量1.8k 收藏 3
点赞数 2
文章标签： html5 javascript vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shinjie1210/article/details/119303011
版权

随手小计

使用ele自带的container布局布置的时候 如果侧边栏aside内容不够填满页面，会出现下面这种情况

 侧边栏无法占据全高度

 这时候就要给侧边栏所有的父元素增加这个属性

height：100%

 包含但不限于 el-coutainer、el-aside标签和侧边栏navmenu的el-menu标签

同时不要忘记在index.html给html和body标签同样设置这个属性 

少一个属性则无法占据全部高度

 设置完成效果图

shinjie1210
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决element-ui侧边菜单栏高度占满屏幕
starstarss的博客
03-10 3万+
element-ui侧边导航栏高度占满屏幕 前端小白第一份博客上线 element-ui 最近写项目，有一个界面用element导航栏组件写了侧边栏，如图 但是发现这个侧边栏（红色区域）的高度，是动态的，也就是说有多少条数据就显示多少 只有两三条的时候就是上图所示，如果是很多条的话，高度就会自动撑开 但是这样界面看起来很突兀，我想要的是，高度一直占满屏幕，多条菜单数据的话，在内部形成滚动条，如下...
Element UI设置侧边栏高度占满全屏，Y轴滚动条隐藏，不影响滚动
m0_70752874的博客
11-23 2289
先看效果：实现了高度占满全屏，隐藏滚动条，但可以滚动 这里采用的是Element UI的Container布局，使用文档中给出的举例解决了aside和main的独立滚动条效果。 布局： 在布局上采用的就是文档给举例的布局，然后在el-aside外套了一个div.aside,用于设置隐藏滚动条。 <!-- 侧边栏 --> <div class="aside"> <el-aside width="178px"> <!-- 侧边导航 --
Vue中使用element-ui的menu高度撑满屏幕
xvzhengyang的博客
04-21 6203
<template> <el-container class="el-container"> <el-aside width="200px" class="el-aside-container"> <el-menu @select="handleSelect" active-text-color="#367fff" class="el-menu-container" text-.
使用elementui做后台管理系统，el-aside(el-menu)与el-main高度不一的问题，实现el-aside(el-menu)占满整个页面，以及实现多级菜单。
qq_51758070的博客
08-23 7062
先来看看问题1：（实现el-menu占满整个页面）这是el-menu没有设置高度出现的问题这是将el-menu这块高度设置为100vh，出现的问题最后，解决问题 ，如图 在App.vue中，添加以下代码 在布局文件中，也就是在以下文件中，给container类添加戴拿 最后，也就是在el-main里面，即TabInner里面添加以下代码 问题2：实现多级菜单做法：遍历从父组件传过来的menuData数组数据（菜单栏数据），如果数据里有children属性，则建立一个父级菜单名，并再次循环去判断
解决Vue+Element UI 使用el-aside时菜单栏无法撑起整个侧边栏高度,解决点开菜单栏时有部分突起问题。
qq_59390336的博客
11-27 3461
解决Vue+Element UI 使用el-aside时菜单栏无法撑起整个侧边栏高度,解决点开菜单栏时有部分突起问题。
Element-Ui组件 NavMenu 导航菜单的具体使用
10-16
NavMenu是Element-UI中的一个核心组件，用于创建导航菜单，可以支持水平和垂直两种模式，适用于各种类型的应用场景。 ### 基础用法 1. **水平导航菜单**： 在水平模式下，`el-menu`组件可以通过`:default-active`...
Element NavMenu导航菜单的使用方法
10-15
Element UI的NavMenu导航菜单是前端开发中常用的一个组件，尤其在构建Web应用的侧边栏或顶部导航时。这个组件提供了丰富的样式和交互功能，能够帮助开发者快速创建出美观且易于使用的导航结构。 首先，让我们了解...
ElmentUI的NavMenu组件动态封装
01-08
在介绍Element UI的NavMenu组件动态封装的过程中，我们将首先对Element UI这个流行的前端UI框架做简要回顾，接着深入探讨NavMenu组件的结构和功能，然后针对如何利用递归技术动态渲染组件的subMenu和menu_item进行...
el-menu高度超出出现滚动条
浪里小博条
01-11 2863
el-menu高度超出，el-aside高度超出，el-aside取消滑动条
Vue/Element-ui动态调整左侧菜单栏高度
总结前端开发中遇到的问题，分享前端知识
08-25 5729
动态调整左侧菜单栏高度为全body高度，仅供参考 <el-container :style="containerHeight"> <el-scrollbar> <el-aside style="width:200px;"> .... </el-aside> </el-scrollbar> </el-container> ..
解决element-plus侧边栏组件el-menu不占满可视窗高度的问题
qq_44886882的博客
07-27 4449
解决element-plus侧边栏组件el-menu不占满可视窗高度的问题。
css布局，让侧边栏高度撑满，并且不会随着屏幕内容滚动
lyhDream的专栏
06-10 6958
一、需求 要让左侧边栏固定，并且不会随着页面的滚动向上滚动，侧边栏内容如果超出，可以显示滚动条 二、实现原理 设置布局：position: fixed 设置overflow-y: scroll 三、效果图： 四、实现代码 <!DOCTYPE HTML> <html> <header> <title>layout test</title> </header> <body> <style>
vue element-ui 导航做全屏/取消全屏功能
IT博客技术分享
05-14 2091
先上效果图 html部分代码： <!-- 全屏 --> <span class="user" @click="toggleFullScreen"> <el-tooltip class="item" effect="dark" :content="isFullScreen ? '退出全屏':'全屏'" placement="bottom"> <i :class="isFullScreen ? '
Element-ui 在使用侧边栏时，且包含头部导航时，高度无法占满
qianfenghua的博客
06-17 755
解决Element-ui 在使用侧边栏时，且包含头部导航时，高度无法占满。
让网站更美观：element 实现导航栏收起展开功能
Shids_的博客
01-16 1万+
让网站更美观：element 实现导航栏收起展开功能
修改Element-UI的navmenu菜单的高度
dxl99的博客
08-08 1589
修改Element-UI的navmenu菜单的高度
记录学习碰到的问题：element UI导航菜单高度不能铺满问题
璐先生的博客
07-31 7227
在这里插入代码片@TOC 学vue+element时候发现导航菜单不能铺满浏览器 通过最外层加个div，并把每一层高度设成100%，解决此问题 最后效果 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区
elementui设置弹框，内容宽度占满并且选择性展示
qq_43894292的博客
02-07 1753
<el-dialog :visible.sync="shenheVisible" title="入库" @close="closeDialog" > <el-form ref="searchForm" :model="form" label-width="80px"> <el-form-item label="审核结果" style="width: 100%; display: block;"> <el-select
Elementui中El-menu导航栏
热门推荐
06-09 1万+
el-menu官方文档：Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/menu 导航栏水平时去除底部白边： 注意：水平时去除底部白边是用的新添加的style标签实现的。其他方式不行，如用::deep，或者直接在原来的style中改，都不行 侧边栏展开时宽度：
elementui NavMenu
最新发布
07-24
`NavMenu` 是 ElementUI 提供的一个用于创建导航菜单的组件。通过这个组件，你可以快速搭建出美观且功能丰富的导航界面。`NavMenu` 支持多种样式和布局选项，能够适应各种网站和应用的需求。以下是一些关键特性： #...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值