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

在刚开始用element-plus的布局时,发现无法占满屏幕:

App.vue中添加如下css代码:

css 复制代码
<style>
  html, body, #app {
    margin: 0;
    padding: 0;
    height: 100%;
  }
</style>

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

html 复制代码
<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>

即可保证占满屏幕:

相关推荐
李明卫杭州8 小时前
Vue2 与 Vue3 自定义指令详解:钩子变化、迁移指南与实战示例
前端·javascript·vue.js
nicole bai10 小时前
vue 自定义模块内容
前端·javascript·vue.js
万亿少女的梦16810 小时前
基于Spring Boot、Vue与MySQL的高校实习信息管理系统设计与实现
spring boot·mysql·vue·权限管理·restful api
遇乐的果园12 小时前
前端学习笔记-vue列表处理
前端·vue.js·学习
ss27312 小时前
Vue 完整版本发展史时间线(2013–2026)|版本迭代里程碑+核心特性对照表
前端·javascript·vue.js
英勇无比的消炎药12 小时前
体积砍半、加载提速、请求不卡:TinyRobot 生产环境性能调优全攻略
vue.js
gis开发之家12 小时前
《Vue3 从入门到大神32篇》Vue3 源码详解(二):从 GitHub Clone 到断点调试,手把手搭建源码阅读环境
vue.js·前端框架·github·vue3·vue3源码
徐小超14 小时前
从0到1落地AI知识问答系统(一):AI结对协作实战技巧
vue.js·node.js·全栈
摇滚侠1 天前
SpringBoot3+Vue3 全套视频教程 45-51
前端·javascript·vue.js
星河耀银海1 天前
框架结合:Vue+HTML5+AI实现智能前端应用开发
前端·vue.js·html5