vue3 element-plus 让el-container占满屏幕

在刚开始用element-plus的布局时,发现无法占满屏幕:
在这里插入图片描述
App.vue中添加如下css代码:

<style>
  html, body, #app {
    margin: 0;
    padding: 0;
    height: 100%;
  }
</style>

同时布局代码所在的component如下所示:

<template>
  <div class="common-layout">
    <el-container>
      <el-header id="header">Header</el-header>
      <el-main id="main">Main</el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
</script>

<style>
  .common-layout, .el-container {
    height: 100%;
  }
</style>

即可保证占满屏幕:
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

亚马逊云科技AWS免费证书-EC2服务器设计(含题库)

亚马逊云AWS官方程序员专属免费证书又来了&#xff01;这次证书是关于AWS EC2实例的设计和搭建&#xff0c;EC2作为AWS服务的核心&#xff0c;是学好AWS的第一步。强推没有任何AWS背景和转码的小伙伴去学&#xff01;学完也能变成AWS开发大神&#xff01; 证书名字叫Getting St…

嵌入式开发四:STM32 基础知识入门

为方便更好的学习STM32单片机&#xff0c;本篇博客主要总结STM32的入门基础知识&#xff0c;重点在于理解寄存器以及存储器映射和寄存器映射&#xff0c;深刻体会STM32是如何组织和管理庞大的寄存器&#xff0c;从而提高开发效率的&#xff0c;为后面的基于标准库的开发做好铺垫…

【C语言实现贪吃蛇】(内含源码)

前言&#xff1a;首先在实现贪吃蛇小游戏之前&#xff0c;我们要先了解Win32 API的有关知识 1.Win32 API Windows这个多作业系统除了协调应用程序的执行、分配内存、管理资源之外&#xff0c;它同时也是一个很大的服务中心&#xff0c;调佣这个中心的各种服务&#xff08;每一…

私有开源LLM实例的三个考虑因素

原文地址&#xff1a;three-considerations-for-private-open-source-llm-instances 2024 年 4 月 29 日 在生产应用中使用商业 LLM APIs 会带来明确且经过充分研究的风险。因此&#xff0c;企业越来越多地转向利用开源的私有托管LLM实例&#xff0c;并通过RAG技术进行增强。 介…

Qt 信号槽中信号重名解决办法

1、类似与Qt4中的写法&#xff1a; 2、函数指针 3、泛型 connect(ui->combox, QOverload<int>::of(&QCombox::currentIndexChanged), this ,&mainwindow::onindexchange);

如何使用免费软件从Mac恢复音频文件?

要从Mac中删除任何文件&#xff0c;背后是有原因的。大多数Mac用户都希望增加Mac中的空间&#xff0c;这就是为什么他们更喜欢从驱动器中删除文件以便出现一些空间的原因。一些Mac用户错误地删除了该文件&#xff0c;无法识别这是一个重要文件。例如&#xff0c;他们错误地从Ma…

【 书生·浦语大模型实战营】作业(七):大模型实战评测

【 书生浦语大模型实战营】作业&#xff08;七&#xff09;&#xff1a;大模型实战评测 &#x1f389;AI学习星球推荐&#xff1a; GoAI的学习社区 知识星球是一个致力于提供《机器学习 | 深度学习 | CV | NLP | 大模型 | 多模态 | AIGC 》各个最新AI方向综述、论文等成体系的学…

远程链接linux

远程连接 ssh 远程登录操作&#xff0c;ssh会对用用户进行身份信息的验证&#xff0c;会对两台主机之间发通信数据进行加密 安装 ssh 远程登录的服务端 yum install -y openssh-server启动 ssh 服务 systemctl start ssh.service 关闭 ssh 服务 systemctl stop ssh.service …

基于Flask的岗位就业可视化系统(一)

前言 本项目综合了基本数据分析的流程&#xff0c;包括数据采集&#xff08;爬虫&#xff09;、数据清洗、数据存储、数据前后端可视化等 推荐阅读顺序为&#xff1a;数据采集——>数据清洗——>数据库存储——>基于Flask的前后端交互&#xff0c;有问题的话可以留言…

数据库(MySQL) —— DDL语句

MySQL—— DDL语句 什么是MySQL的DDL语句查看所有的所有数据库查看当前使用的数据库库操作创建库使用数据库删除库 表操作创建表查询当前库中所有的表查询表结构查询指定表的建表语句删除表 表修改删除字段修改数据类型修改字段名和字段类型重命名表删除指定表并重新创建该表 我…

【C++】命名冲突了怎么办?命名空间来解决你的烦恼!!!C++不同于C的命名方式——带你认识C++的命名空间

命名空间 导读一、什么是C?二、C的发展三、命名空间3.1 C语言中的重名冲突3.2 什么是命名空间&#xff1f;3.3 命名空间的定义3.4 命名空间的使用环境3.5 ::——作用域限定符3.6 命名空间的使用方法3.6.1 通过作用域限定符来指定作用域3.6.2 通过关键字using和关键字namespace…

【书生·浦语大模型实战营第二期】OpenCompass 大模型评测实战——学习笔记7

文章目录 使用OpenCompass评测llm的步骤实践操作 参考资料 为什么要做大模型的评测 为了了解llm的优势和限制指导和改进人类与llm的交互规划llm未来的发展根据llm的评测报告&#xff0c;针对不同的问题&#xff0c;选择最合适的模型 评测对象 基座模型和chat模型 使用OpenCo…

ArcGIS+ChatGPT双剑合璧:从数据读取到空间分析,一站式掌握GIS与AI融合的前沿科技!

目录 专题一 AI大模型应用 专题二 ArcGIS工作流程及功能 专题三 prompt的使用技巧 专题四 AI助力工作流程 专题五 AI助力数据读取 专题六 AI助力数据编辑与处理 专题七 AI助力空间分析 专题八 AI助力遥感分析 专题九 AI助力二次开发 专题十 AI助力科研绘图 专题十一…

基于php+mysql+html超市商品管理系统(含论文)

博主介绍&#xff1a; 大家好&#xff0c;本人精通Java、Python、Php、C#、C、C编程语言&#xff0c;同时也熟练掌握微信小程序、Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我有丰富的成品Java、Python、C#毕设项目经验&#xff0c;能够为学生提供各类…

IntelliJ IDEA - Auto filling Java call arguments 插件教程

首先&#xff0c;安装该插件&#xff0c;下载完毕后重启 IDEA 当 userService 中方法需要参数的时候&#xff0c;我们一般都是自己手动写这些参数&#xff0c;是很费劲的。因此就出现了一个插件解决这类问题 Auto filling Java call arguments 光标点击需要填写参数的位置 Alt …

蓝桥杯备战国赛1

开心的金明 火烧赤壁 南蛮图腾 #include<iostream> #include<algorithm> #include<cmath> using namespace std; int n, m; int v[30], k[30]; int arr[30010][30]; int main() {cin >> n >> m;for (int i 1;i < m;i){cin >> v[i] &g…

2024年企业邮箱系统排行榜:五款企业邮箱对比

2024年企业邮箱怎么选择&#xff1f;在企业邮箱市场中&#xff0c;Zoho Mail企业邮箱、腾讯企业邮箱、Gmail、阿里企业邮箱以及网易企业邮箱位于排名的前五。本篇文章就详细对比下这五款企业邮箱的发展历程、产品功能和适用的场景。 一、Zoho Mail企业邮箱 1、发展历程 Zoho M…

im即时通讯源码/仿微信app源码+php即时通讯源码带红包+客服+禁言等系统php+uniapp开发

即时通讯(IM)系统是现代互联网应用中不可或缺的一部分&#xff0c;它允许用户进行实时的文本、语音、视频交流。随着技术的发展&#xff0c;IM系统的功能越来越丰富&#xff0c;如红包、客服、禁言等。本文将探讨如何使用PHP语言开发一个功能完备的即时通讯系统&#xff0c;包括…

截图时,VSCode屏幕泛白

问题如图所示&#xff1a; 放弃前摇&#xff0c;直接给出解决方案&#xff1a;换个主题即可。 实测&#xff0c;Light Modern 的色域正常&#xff0c;其他的没有经过测试。 出现这个问题的原因&#xff0c;大概率就是色彩空间不匹配。 HDR 内容是为了在支持 HDR 的显示设备上展…

【Linux学习】(2)OS的简单了解|Linux的基本指令操作

前言 本文将先简单了解什么是操作系统&#xff0c;再讲解一些Linux的基本指令。 一、操作系统的简单了解 1、什么是操作系统&#xff08;Operating System&#xff0c;简称OS&#xff09;&#xff1f; OS是一款做软硬件管理的软件。软硬件的体系结构图&#xff1a; 硬件&…