关于el-card的height设置100%后, el-card内容超出高度后,内容被隐藏这件事

1. 解决方法

全局样式添加以下代码

.el-card__body{height: 100%;width: 100%;
}

2. 问题原因

代码

<el-card style="height: 100%"><!-- ... -->
</el-card>

选中.el-card 元素发现这里的 .el-card overflow:hidden
在这里插入图片描述
而内部 .el-card__body除了padding外并未设置其他
在这里插入图片描述
所以el-card__body的宽高, 由内容决定, 当内容超过了el-card设置的高度后就会出现内容被隐藏的问题,

所以给el-card__body一个不超过el-card的宽高问题就可以解决

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

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

相关文章

WiFi无线连接管理安卓设备工具:WiFiADB

介绍 WiFi ADB 使您能够通过 WiFi TCP/IP 连接直接在设备上轻松调试和测试 Android 应用&#xff0c;无需使用 USB 数据线。在启用 WiFi 上的 ADB 后&#xff0c;打开控制台将电脑连接到设备。 手机和电脑在同一个WiFi然后电脑上运行adb connect x.x.x.x:x命令即可 下载 谷…

七段 LED 显示器(7段数码管)

7 段 LED 显示器, 通常简称为 LED 数码管 或 数码管. 通过 菜单--绘制--数字芯片--添加 7 段 LED 显示器 可以引入它. 普通模式 它内部其实就是七盏长条状的 LED 灯, 有的横着放, 有的竖着放. 七个灯用 a b c d e f g 分别表示. 灯的位置从上到下, 从里到外顺时针下来, 如上图…

青年女演员白澜闪耀亮相第五届庐山电影节红毯

2024年9月25日&#xff0c;演员白澜受邀出席了第五届庐山电影节盛典晚会&#xff0c;在这个星光熠熠的夜晚&#xff0c;青年演员白澜以一袭精心设计的礼服惊艳亮相&#xff0c;成为红毯瞩目的焦点。 整个第五届庐山国际爱情电影周以“庐山&#xff0c;你的爱情靠山”为主题&…

帆软通过JavaScript注入sql,实现数据动态查询

将sql语句设置为参数 新建数据库查询 设置数据库查询的sql语句 添加控件 JavaScript实现sql注入 添加事件 编写JavaScript代码 //获取评价人id var pjrid this.options.form.getWidgetByName("id").getValue();//显示评价人id alert("评价人&#xff1a;&…

微服务架构拆分策略与实践

微服务架构拆分策略与实践指南 随着互联网技术的发展&#xff0c;传统的单体应用逐渐显现出其局限性&#xff0c;特别是在扩展性和维护性方面。微服务架构作为一种解决这些问题的方法&#xff0c;通过将大型应用分解成一系列小型、独立的服务单元&#xff0c;每个单元负责单一…

PG数据库查询字段备注信息

在 PostgreSQL 数据库中&#xff0c;要查询某个表的字段名&#xff08;即列名&#xff09;及其备注信息&#xff0c;可以使用 information_schema.columns 视图来获取列名&#xff0c;并结合 pg_description 和 pg_class 等系统表来获取列的备注信息。下面是一个示例 SQL 查询&…

低代码开发平台:未来五大发展趋势预测

在数字化转型的浪潮中&#xff0c;低代码开发平台正迅速崛起&#xff0c;成为企业软件开发的重要工具。随着技术的不断进步和市场需求的持续增长&#xff0c;低代码开发平台在未来将展现出更为广阔的发展前景。本文将预测并探讨低代码开发平台的五大发展趋势。 深度融合数字化与…

re轻松拆分四则运算expression(^从头匹配、(?:xxxx)非捕获组、| 交替运算符联合演习)

与ai对抵聊“算式匹配”&#xff0c;发现^从头匹配、(?:xxxx)非捕获组、| “交替”运算符联合使用的妙处。 (笔记模板由python脚本于2024年09月27日 18:35:32创建&#xff0c;本篇笔记适合喜欢python喜欢正则的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;…

【Kubernetes】常见面试题汇总(三十九)

目录 92.你所用的到的日志分析工具有哪些以及它们如何与 K8s 集群通讯。 特别说明&#xff1a; 题目 1-68 属于【Kubernetes】的常规概念题&#xff0c;即 “ 汇总&#xff08;一&#xff09;~&#xff08;二十二&#xff09;” 。 题目 69-113 属于【Kubernetes】的生产…

数据集成需要解决的主要问题有哪些?

在企业业务的不断扩展和数据的日益增长下&#xff0c;数据集成已成为推动企业创新和发展的关键力量。然而&#xff0c;数据集成并非易事&#xff0c;它面临着诸多挑战和问题。那么&#xff0c;数据集成究竟需要解决哪些主要问题呢&#xff1f; 一、数据集成面临的主要问题 1. …

【RabbitMQ】死信队列、延迟队列

死信队列 死信&#xff0c;简单理解就是因为种种原因&#xff0c;无法被消费的消息。 有死信&#xff0c;自然就有死信队列。当一个消息在一个队列中变成死信消息之后&#xff0c;就会被重新发送到另一个交换器中&#xff0c;这个交换器就是DLX&#xff08;Dead Letter Excha…

连锁收银系统的五大功能 选择开源收银系统三要素

连锁收银系统的五大功能&#xff0c;很多新手是不清楚的&#xff0c;老手也只是知道一些大概&#xff0c;今天&#xff0c;商淘云为大家分享收银系统的五大功能&#xff0c;尤其是第五个&#xff0c;大部分人不清楚&#xff0c;有的企业前面选了不合适的收银系统&#xff0c;导…

如何在iPad上设置Chrome为默认浏览器

将Chrome设置为iPad上的默认浏览器&#xff0c;不仅能够享受到谷歌强大的搜索功能和丰富的扩展生态&#xff0c;还能通过一系列自定义设置来进一步提升浏览体验。本文将详细介绍如何在iPad上完成这一设置&#xff0c;并探讨如何通过优化Chrome浏览器的相关功能&#xff0c;让您…

c语言200例 64

大家好&#xff0c;欢迎来到无限大的频道。 今天带领大家来学习c语言。 题目要求&#xff1a; 设计一个进行候选人的选票程序。假设有三位候选人&#xff0c;在屏幕上输入要选择的候选人姓名&#xff0c; 有10次投票机会&#xff0c;最后输出每个人的得票结果。好的&#xff…

Android 利用OSMdroid开发GIS 添加点、线、面和标记点

部署看这个&#xff1a;Android 利用OSMdroid开发GIS-CSDN博客 直接上代码 activity_main.xml&#xff1a; <?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"xm…

【LLM多模态】视频理解模型Cogvlm-video和MVBench评测基准

note Cogvlm-video模型通过视频抽帧&#xff08;24帧&#xff0c;每帧大小为224 x 224&#xff09;后经过ViT进行图像编码&#xff08;ViT中添加了2x2的卷积核更好的压缩视觉信息&#xff09;&#xff0c;使用adapter模块更好的将视觉特征和文本特征对齐&#xff0c;得到的图像…

5--苍穹外卖-SpringBoot项目中菜品管理 详解(一)

目录 公共字段自动填充 问题分析 实现思路 代码开发 步骤一 步骤二 功能测试 新增菜品 需求分析和设计 代码开发 文件上传接口 功能测试 1--苍穹外卖-SpringBoot项目介绍及环境搭建 详解-CSDN博客 2--苍穹外卖-SpringBoot项目中员工管理 详解&#xff08;一&#…

python绘制图像

柱状图 import os# 输入想要存储图像的路径 os.chdir(D:)import matplotlib.pyplot as plt import numpy as np # 改变绘图风格 import seaborn as snssns.set(color_codesTrue)cell [gen7, xgspon, 3081GB, vettel, totalplay, other] pvalue [21, 20, 18, 13, 7, 34]width…

Python基础知识(八)--文件操作,备份文件

文件可以用来存储数据。若根据文件内容的不同来给文件分类&#xff0c;可分为&#xff1a; &#xff08;1&#xff09;文本类型&#xff1a;存放文字类数据&#xff0c;读写时使用r、w&#xff1b; &#xff08;2&#xff09;二进制原始数据类型&#xff1a;存放二进制bytes数…

【GUI设计】基于图像分割的GUI系统(6),matlab实现

博主简介&#xff1a; 如需获取设计的完整源代码或者有matlab图像代码项目需求/合作&#xff0c;可联系主页个人简介提供的联系方式或者文末的二维码。博客内容有疑问可联系沟通&#xff08;博主邮箱&#xff1a;3249726188qq.com&#xff09;。 ~~~~~~~~~~~~~~~~~~~~~~~…