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

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

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

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

代码:在写侧边栏的组件中添加

在这里插入图片描述

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

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

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

相关文章

操作系统:进程间通信 | 管道

目录 1.进程间通信介绍 1.1.简要介绍 1.2.进程间通信的目的 1.3.进程间通信的本质 2.管道 2.1.管道的通信原理 2.2.匿名管道 2.3.命名管道 2.4.基于匿名管道的进程池demo 2.4.1.进程池的相关引入 2.4.2.整体框架的分析 2.4.3.代码的实现 1.进程间通信介绍 1.1.简…

华为认证FAQ | 考试预约、考券购买常见问题

●考试预约常见问题● Q : 如何进行考试预约? A : 登录“华为人才在线官网” >>参考考试预约操作指引在线预约考试>>检查考试预约记录,确认预约成功 (私信获取考试预约操作指引文档)。(注:非本人预约…

程序员学CFA——数量分析方法(四)

数量分析方法(四) 常见概率分布基本概念离散型随机变量与连续型随机变量离散型随机变量连续型随机变量 分布函数概率密度函数(PDF)累积分布函数(CDF) 离散分布离散均匀分布伯努利分布二项分布定义股价二叉树…

程序的表示、转换与链接:三、运算电路基础

目录 一、整数加减运算理论二、数字逻辑电路基础和整数加减运算部件三、如何启用逻辑电路:从C表达式到逻辑电路四、C语言中的各类运算 一、整数加减运算理论 整数加减运算 无符号整数加减运算:指针、地址等通常被说明为无符号整数,因而在进行…

pycharm远程连接server

1.工具–部署–配置 2.部署完成后,将现有的项目的解释器设置为ssh 解释器。实现在远端开发 解释器可以使用/usr/bin/python3

Opencv_10_自带颜色表操作

void color_style(Mat& image); Opencv_10_自带颜色表操作: void ColorInvert::color_style(Mat& image) { int colormap[] { COLORMAP_AUTUMN, COLORMAP_BONE , COLORMAP_JET , COLORMAP_WINTER, COLORMAP_RAINBOW , COLOR…

Ts支持哪些类型和类型运算(下)

目录 1、条件判断 (extends ?) 2、推导 infer 3、联合 | 4、交叉 & 5、映射类型 1、条件判断 (extends ?) ts里的条件判断,语法为 T extends XXX ? true : false ,叫做…

【Qt 学习笔记】Qt常用控件 | 按钮类控件 | Check Box的使用及说明

博客主页:Duck Bro 博客主页系列专栏:Qt 专栏关注博主,后期持续更新系列文章如果有错误感谢请大家批评指出,及时修改感谢大家点赞👍收藏⭐评论✍ Qt常用控件 | 按钮类控件 | Check Box的使用及说明 文章编号&#xff…

智能时代 | 合合信息Embedding模型荣获C-MTEB榜单第一

目录 前言 1. MTEB与C-MTEB 2. acge模型的优势 3. Embedding模型应用 4. 大模型发展的关键技术 结语 前言 随着人工智能的不断发展,大语言模型吸引着社会各界的广泛关注,支撑模型应用落地的Embedding模型成为业内的焦点,大模型的发展给…

解放生产力:项目管理软件的神奇作用大揭秘!

对于刚刚进入项目管理领域的新人首先要了解的概念就是项目管理软件是什么?项目管理软件的作用,如今的项目管理软件已经非常成熟,融合了一整套的项目管理理论,在管理项目进度、管理工时、团队协同方面发挥着重要作用。 一、项目管理…

vue 关键字变红

1.html <div v-html"replaceKeywordColor(item.title)" ></div> 2.js //value为搜索框内绑定的值 replaceKeywordColor(val) {if (val?.includes(this.value) && this.value ! ) {return val.replace(this.value,<font color"red&…

游戏黑灰产识别和溯源取证

参考&#xff1a;游戏黑灰产识别和溯源取证 1. 游戏中的黑灰产 1. 黑灰产简介 黑色产业&#xff1a;从事具有违法性活动且以此来牟取利润的产业&#xff1b; 灰色产业&#xff1a;不明显触犯法律和违背道德&#xff0c;游走于法律和道德边缘&#xff0c;以打擦边球的方式为“…

【C++】类和对象④(类的默认成员函数:取地址及const取地址重载 | 再谈构造函数:初始化列表,隐式类型转换,缺省值)

&#x1f525;个人主页&#xff1a;Forcible Bug Maker &#x1f525;专栏&#xff1a;C 目录 前言 取地址及const取地址操作符重载 再谈构造函数 初始化列表 隐式类型转换 explicit关键字 成员变量缺省值 结语 前言 本篇主要内容&#xff1a;类的六个默认成员函数中…

Stable Diffusion 模型分享:_CHEYENNE_(欧美漫画)CHEYENNE_v16.safetensors

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里,订阅后可阅读专栏内所有文章。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八下载地址模型介绍<

吉林省教育学院学报杂志社吉林省教育学院学报编辑部2024年第3期目录

特稿《吉林省教育学院学报》投稿&#xff1a;cn7kantougao163.com 吉林省2023年初中毕业学业水平考试评价与分析报告 Junior High School Teaching Research and Training Department, Jilin Provincial Institute of Education; 1-25 基于吉林省图书馆专利数据资源的吉…

刷题训练之二分查找

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;熟练掌握二分查找算法 > 毒鸡汤&#xff1a;学习&#xff0c;学习&#xff0c;再学习 ! 学&#xff0c;然后知不足。 > 专栏选自&#xff1a;刷题…

解决“找不到MSVCP120.dll”或“MSVCP120.dll丢失”的错误方法

在计算机使用过程中&#xff0c;遇到诸如“找不到MSVCP120.dll”或“MSVCP120.dll丢失”的错误提示并不罕见。这类问题往往会导致某些应用程序无法正常运行&#xff0c;给用户带来困扰。本文旨在详细阐述MSVCP120.dll文件的重要性、其丢失的可能原因&#xff0c;以及解决方法&a…

C++ //练习 12.32 重写TextQuery和QueryResult类,用StrBlob代替vector<string>保存输入文件。

C Primer&#xff08;第5版&#xff09; 练习 12.32 练习 12.32 重写TextQuery和QueryResult类&#xff0c;用StrBlob代替vector保存输入文件。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码块 /*****************************…

Jammy@Jetson Orin - Tensorflow Keras Get Started: 000 setup for tutorial

JammyJetson Orin - Tensorflow & Keras Get Started: 000 setup for tutorial 1. 源由2. 搭建环境2.1 安装IDE环境2.2 安装numpy2.3 安装keras2.4 安装JAX2.5 安装tensorflow2.6 安装PyTorch2.7 安装nbdiff 3. 测试DEMO3.1 numpy版本兼容问题3.2 karas API - model.compil…

STC15L2K60S2-28I-LQFP44 单片机芯片 STC宏晶

STC15L2K60S2-28I-LQFP44 规格信息&#xff1a; 产品类型STC(宏晶) UART/USART2 额定特性- SPI1 USB Device0 USB Host/OTG0 PWM3 I2C&#xff08;SMBUS/PMBUS&#xff09;0 LCD0 工作电压2.4V ~ 3.6V EEPROM 尺度1KB Ethernet0 A/D8x10bit CAN0 D/A3x10bit CPU…