lementui el-menu侧边栏占满高度且不超出视口

做了几次老是忘记,这次整理好逻辑做个笔记方便重复利用;

问题:elementui的侧边栏是占不满高度的;但是使用100vh又会超出视口高度不美观;
解决办法:

1.获取到侧边栏底部到视口顶部的距离
2.获取到视口的高度减去侧边栏高度获取需要补的高度
3.最后将两个高度相加获取到总的高度
在这里插入图片描述

代码:

在这里插入图片描述

let bottomScorll = 0
//处理侧边栏菜单100vh超出屏幕
onMounted(()=>{//获取到侧边栏dom对象 el-menuconst element = document.getElementById('asid-menu')// 获取el-menu的rect对象const rect = element.getBoundingClientRect()//bottom:矩形底部边缘相对于视口的顶部的距离。 height:矩形的高度。bottomScorll = window.innerHeight - rect.bottom// 动态设置到元素的高度上element.style.height = `${rect.height + bottomScorll}px`
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/830.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

运行django

确保app被注册 urls.py中编写url 视图对应关系 命令行启动 python manage.py runserver

Bootstrap 5 保姆级教程(十一):模态框 提示框

一、模态框 1.1 创建模态框 以下实例创建了一个简单的模态框效果 &#xff1a; <div class"container mt-3"><h3>模态框实例</h3><p>点击按钮打开模态框</p><button type"button" class"btn btn-primary" d…

有哪些网站设计教程

网站设计教程是帮助人们学习如何设计和开发网站的资源&#xff0c;它们提供了从基础知识到高级技巧的全方位指导。无论您是初学者还是经验丰富的开发者&#xff0c;都可以从这些教程中获益。下面是一些广受欢迎的网站设计教程&#xff0c;它们涵盖了各种技术和工具&#xff1a;…

轻量级SQLite可视化工具Sqliteviz

什么是 Sqliteviz &#xff1f; Sqliteviz 是一个单页面离线优先的渐进式网络应用&#xff08;PWA&#xff09;&#xff0c;用于完全客户端的 SQLite 数据库或 CSV 文件的可视化。 所谓完全客户端&#xff0c;就是您的数据库永远不会离开您的计算机。使用 sqliteviz&#xff0c…

2024 抖音欢笑中国年之渲染技术实践与探索

SAR Creator是一款基于 Typescript 的高性能、轻量化的互动解决方案&#xff0c;目前支持了浏览器和跨端框架平台&#xff0c;服务于字节内部的各种互动业务。 前言 抖音在2024年春节期间推出了欢笑中国年系列活动&#xff0c;为用户带来了全新的体验和乐趣。而SAR Creator则为…

01 MySQL--概念、三范式、表、字段设计方法与规范

1. 定义 1.1 SQL的分类 DQL - 数据查询语言&#xff08;Data Query Language, DQL&#xff09;负责进行数据查询而不会对数据本身进行修改的语句。 SELECT、FROM、WHERE、GROUP BY、HAVING、ORDER BY。DDL - 数据定义语言 (Data Definition Language, DDL) 负责数据结构定义与…

【RV1106的ISP使用记录之基础知识】硬件连接关系与设备树的构建

RV1106具备2个mipi csi2 dphy硬件&#xff0c;1个VICAP硬件和1个ISP硬件。其中&#xff1a; 1、mipi csi2 dphy 用于对数据流的解析&#xff0c;支持MIPC,LVDS,DVP三种接口&#xff1b; 2、VICAP用于数据流的捕获&#xff1b; 3、ISP用于对图像数据进行处理&#xff1b; 这三个…

文件夹变白之谜:原因、恢复与防范之道

在日常电脑使用中&#xff0c;我们有时会遇到一些文件夹突然变成白色文件的情况。这些文件夹看起来就像失去了原有的属性&#xff0c;无法被正常打开或访问。这种情况往往让人感到困惑和焦虑&#xff0c;因为文件夹中可能存储着重要的数据和信息。那么&#xff0c;文件夹为何会…

匿名对象 与 new delet初识

一.匿名对象 1.定义&#xff1a; 没有名称的临时创建的对象&#xff0c;通常用于临时操作或作为函数的实参或返回值。 2.声明周期与作用域&#xff1a; 仅仅在定义所在代码行中&#xff0c;执行完就销毁。 3.使用格式 类名(构造参数) 4.使用场景 临时调用成员函数 mid…

MapReduce 机理

1.hadoop 平台进程 Namenode进程: 管理者文件系统的Namespace。它维护着文件系统树(filesystem tree)以及文件树中所有的文件和文件夹的元数据(metadata)。管理这些信息的文件有两个&#xff0c;分别是Namespace 镜像文件(Namespace image)和操作日志文件(edit log)&#xff…

书生浦语大模型实战训练营--第二期第六节--Lagent AgentLego 智能体应用搭建--homework

一、基础作业 1.完成 Lagent Web Demo 使用&#xff0c;并在作业中上传截图 根据以下命令启动成功&#xff01; 2.完成 AgentLego 直接使用部分&#xff0c;并在作业中上传截图 这是原图 使用AgentLego进行自动目标检测后&#xff0c;很明显图中的物体已经被识别出来了 二、…

【python】如何通过python来发邮件,各种发邮件方式详细解析

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

MQ技术选型

消息队列中间件是分布式系统中重要的组件&#xff0c;主要解决应用耦合、异步消息、流量削锋等问题。它可以实现高性能、高可用、可伸缩和最终一致性架构&#xff0c;是大型分布式系统不可缺少的中间件。 RabbitMQ 特点&#xff1a; RabbitMQ 相当轻量级的消息队列&#xff…

英伟达一系列高质量公开课来了!

B站&#xff1a;啥都会一点的研究生公众号&#xff1a;啥都会一点的研究生 英伟达免费提供许多自学课程&#xff0c;评价肥肠高&#xff0c;有专为初学者设计的也有更进阶的内容&#xff08;提供证书&#xff09;&#xff0c;若实验室/单位基于NVIDIA Jetson进行开发&#xff…

Junit 更多-ApiHug准备-测试篇-010

&#x1f917; ApiHug {Postman|Swagger|Api...} 快↑ 准√ 省↓ GitHub - apihug/apihug.com: All abou the Apihug apihug.com: 有爱&#xff0c;有温度&#xff0c;有质量&#xff0c;有信任ApiHug - API design Copilot - IntelliJ IDEs Plugin | Marketplace 如果大家…

VisualGLM-6B的部署步骤

对于如下命令&#xff0c;你将完全删除环境和环境中的所有软件包 conda remove -n env_name --all 一、VisualGLM-6B环境安装 1、硬件配置 操作系统&#xff1a;Ubuntu_64&#xff08;ubuntu22.04.3&#xff09; GPU&#xff1a;4050 显存&#xff1a;16G 2、配置环境 建…

2024华中杯C题光纤传感器平面曲线重建原创论文分享

大家好&#xff0c;从昨天肝到现在&#xff0c;终于完成了2024华中杯数学建模C题的完整论文啦。 给大家看一下目录吧&#xff1a; 目录 摘 要&#xff1a; 10 一、问题重述 12 二&#xff0e;问题分析 13 2.1问题一 13 2.2问题二 14 2.3问题三 14 三、模型假设 15 四、…

HWOD:字符串字符匹配

一、知识点 c语言中&#xff0c;判断一个字符串中是否含有某字符是很容易的&#xff0c;不需要知道字符串的长度 i0; while(c ! str[i] && str[i] ! \0){ i; } if(str[i] \0){ return false; } return true; 二、题目 1、描述 判断短字符串S中的所有字符…

Redis: 在项目中的应用

文章目录 一、Redis的共享session应用二、分布式缓存1、缓存2、缓存一致性问题解决方案&#xff08;缓存更新策略&#xff09;&#xff08;1&#xff09;作用&#xff08;2&#xff09;三种策略&#xff08;3&#xff09;主动更新策略&#xff08;数据库、缓存不一致解决方案&a…

汽车研发项目进度管理的挑战与优化策略

随着汽车行业的快速发展和市场竞争的加剧&#xff0c;新车型研发项目的进度管理成为车企赢得市场的关键。然而&#xff0c;由于汽车研发项目通常具有投资大、周期长、技术难度高、参与方众多等特点&#xff0c;项目进度管理面临着诸多挑战。为了提升车型研发效率、缩短研发周期…