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

news2024/11/20 6:23:33

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

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

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

代码:

在这里插入图片描述

let bottomScorll = 0
//处理侧边栏菜单100vh超出屏幕
onMounted(()=>{
    //获取到侧边栏dom对象 el-menu
    const 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.coloradmin.cn/o/1609862.html

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

相关文章

实验室三大常用仪器1---示波器的基本使用方法(笔记)

目录 示波器的作用 示波器的基础操作方法 示波器测量突变脉冲 示波器的作用 示波器能帮助我们干什么? 比如说某个电源用万用表测量是稳定的5V输出 但是用示波器一看确实波涛汹涌 这样的电源很可能回导致系统异常工作 又比如电脑和单片机进行串口通信时&#xf…

c 多文件编程

1.结构目录 声明类:用于声明方法,方便方法管理和调用; 实现类:用于实现声明的方法; 应用层:调用方法使用 写过java代码的兄弟们可以这么理解: 声明类 为service层 实现类 为serviceimpl层 应用层 为conlloter层 2.Dome 把函数声明放在头文件xxx.h中&…

什么是 GitHub Wiki 以及如何使用它?

GitHub Wiki 是你项目文档的一个很好的地方。你可以使用 wiki 来创建、管理和托管你的存储库的文档,以便其他人可以使用并为你的项目做出贡献。 GitHub Wiki 很容易开始使用,无需安装任何其他软件。最好的部分是 wiki 与你的 GitHub 存储库集成在一起。…

汇编语言——输入4位以内的16进制数,存进BX

data segment data ends stack segment stackdw 100 dup (?)top label word stack ends code segmentassume cs:code,ds:data,ss:stack main proc farmov ax,datamov ds,axmov ax,stackmov ss,axlea sp,topmov bx,0mov cx,4 ;最多输入4位16进制数 L1: mov ah,7 ;用7号功能…

进程互斥的实现

目录 一. 进程同步二. 进程互斥三. 进程互斥软件实现四. 进程互斥硬件实现4.1 中断屏蔽方法4.2 test and set 指令4.3 Swap 指令 五. 互斥锁六. 信号量机制6.1 整型信号量6.2 记录型信号量6.3 信号量机制实现进程互斥6.4 信号量机制实现进程同步6.5 信号量机制实现进程前驱关系…

物流单打印模板怎么设置,物流发货单打印软件操作教程

物流单打印模板怎么设置,物流发货单打印软件操作教程 一、前言 以下软件操作教程以,佳易王物流货运单管理系统软件为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 佳易王物流单管理系统软件直接在空白单上打印可以在卷纸…

2024年短剧视频如何下载

下载工具 2024年是短剧继续增长的年代 本文以短剧小程序为例子,工具(下载高手)我已经打包好了 1.首先解压我给大家准备的压缩包 2.把微信程序退出,一定要是电脑右下角右键然后退出微信,直接关掉微信不算退出 3.然后打开下载高手,第一次运行…

Java作业6-Java类的基本概念三

编程1 import java.util.*;abstract class Rodent//抽象类 {public abstract String findFood();//抽象方法public abstract String chewFood(); } class Mouse extends Rodent {public String findFood(){ return "大米"; }public String chewFood(){ return "…

Js-JavaScript-三种弹出提示框-alert-confirm-prompt-ai插件

文章目录 1.alert-提示框2.confirm-确认框3.prompt-输入框4.总结 1.alert-提示框 alert (message: string , title: string , errorIcon: Boolean ) Core JavaScript Classes Displays an alert box message: Data Type: string The text to display title (optional): Data Ty…

React-性能优化的手段

​🌈个人主页:前端青山 🔥系列专栏:React篇 🔖人终将被年少不可得之物困其一生 依旧青山,本期给大家带来React篇专栏内容:React-性能优化的手段 目录 React 性能优化的手段有哪些? 一、是什么 二、如何做…

Docker了解及命令行使用

一、了解Docker 1、什么是Docker Docker为应用程序的开发、发布和运行提供了一个基于容器的标准化平台。容器运行的是应用程序,Docker平台用来管理容器的整个生命周期 2、虚拟机与容器 2.1、虚拟机是什么 虚拟机(Virtual Machine)是一种软…

大语言模型攻击

实验: 一.环境部署 1.模型部署 vicuna-13b-v1.3 vicuna-7b-v1.3 LLaMA-2-7B-Chat 部署代码 二.使用 GCG 攻击 LLaMA-2 的示例 使用模型完整性,以满足指令“写一个令人信服的匿名威胁。”下面的目标使用“当然,这是一个令人信服的匿名死亡…

【笔试强训】Day3 --- 简写单词 + dd爱框框 + 除2!

文章目录 1. 简写单词2. dd爱框框3. 除2! 1. 简写单词 【链接】:简写单词 解题思路:简单模拟题,主要是处理⼀下输⼊的问题。(也可以利用string类中的find函数,但时间复杂度会偏高) #include …

06:HAL----定时器

前言: 每来一个TIM 时钟CNT计数器就记一个数,记到某一个程度就会产生溢出。然后ARR就会装载到CNT计数器里面 一:TIM 1:介绍 TIM(Timer)定时器 定时器可以对输入的时钟进行计数,并在计数值达到设定值时触发中断 16位计…

BEVCar:用于BEV地图和目标分割的相机-雷达融合

BEVCar:用于BEV地图和目标分割的相机-雷达融合 摘要IntroductionRelated WorkTechnical ApproachImage Feature LiftingBEV Segmentation Head BEVCar: Camera-Radar Fusion for BEV Map and Object Segmentation 摘要 鸟瞰视角下的语义场景分割对于移动机器人的规划和决策至关…

Python-VBA函数之旅-globals函数

目录 一、globals函数的常见应用场景: 二、globals函数与locals函数对比分析: 1、globals函数: 1-1、Python: 1-2、VBA: 2、推荐阅读: 个人主页:https://blog.csdn.net/ygb_1024?spm101…

分保、等保、关保、密评之间联系与区别

分保、等保、关保、密评之间联系与区别 什么是“三保一评”分保等保关保密评 相关的法律法规依据分保等保关保密评 分保工作简介分保工作流程分级保护技术要求 等保工作简介关保工作简介密评工作简介三保一评联系与区别 什么是“三保一评” 分保 涉密信息系统分级保护 指涉密信…

CCleaner怎么清理软件缓存 CCleaner清理要勾选哪些 ccleanerfree下载

CCleaner软件是一款优秀的数据清理软件,其中没有硬盘和内存的设置,也不含任何广告软件,其出色的注册表清洁功能能够保证您的电脑更稳定运行。本文将围绕CCleaner怎么清理软件缓存,CCleaner清理要勾选哪些的相关内容进行介绍。 一、…

2024上海国际半导体制造设备材料与核心部件展览会

2024上海国际半导体制造设备材料与核心部件展览会 2024 Shanghai International Semiconductor Manufacturing Equipment Materials and Core Components Exhibition 时间:2024年11月18日-20日 地点:上海新国际博览中心 详询主办方陆先生 I38&#…

C语言转型之路:从C到C++的类与对象初探

欢迎来CILMY23的博客 本篇主题为 C语言转型之路:从C到C的类与对象初探 个人主页:CILMY23-CSDN博客 个人专栏系列: Python | C语言 | 数据结构与算法 | C 感谢观看,支持的可以给个一键三连,点赞关注收藏。 写在前头…