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>

即可保证占满屏幕:

相关推荐
踩着两条虫2 小时前
目录:VTJ.PRO 在线应用开发平台技术揭秘
vue.js·低代码·ai编程
peak_chan2 小时前
通过vue-virtual-scroller封装虚拟滚动el-select
前端·javascript·vue.js
小李子呢02112 小时前
前端八股Vue(7)---computed计算属性和watch侦听器
前端·javascript·vue.js
Ruihong3 小时前
Vue3 转 React:组件透传 Attributes 与 useAttrs 使用详解|VuReact 实战
vue.js·react.js
gwjcloud3 小时前
基于linux下docker部署前端vue项目
前端·javascript·vue.js
小李子呢02114 小时前
前端八股Vue(6)---v-if和v-for
前端·javascript·vue.js
周星星日记5 小时前
vue3中静态提升和patchflag实现
前端·vue.js·面试
军军君016 小时前
Three.js基础功能学习十五:智能黑板实现实例二
开发语言·前端·javascript·vue.js·3d·threejs·三维
IT枫斗者6 小时前
构建具有执行功能的 AI Agent:基于工作记忆的任务规划与元认知监控架构
android·前端·vue.js·spring boot·后端·架构
hotlinhao6 小时前
Nginx rewrite last 与 redirect 的区别——Vue history 模式短链接踩坑记录
前端·vue.js·nginx