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>

即可保证占满屏幕:

相关推荐
燃先生._.4 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
落魄实习生7 小时前
AI应用-本地模型实现AI生成PPT(简易版)
python·ai·vue·ppt
2401_857600958 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_857600958 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL8 小时前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js
轻口味8 小时前
Vue.js 核心概念:模板、指令、数据绑定
vue.js
2402_857583498 小时前
基于 SSM 框架的 Vue 电脑测评系统:照亮电脑品质之路
前端·javascript·vue.js
java_heartLake9 小时前
Vue3之性能优化
javascript·vue.js·性能优化
bpmf_fff9 小时前
二九(vue2-05)、父子通信v-model、sync、ref、¥nextTick、自定义指令、具名插槽、作用域插槽、综合案例 - 商品列表
vue
ddd君3177410 小时前
组件的声明、创建、渲染
vue.js