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>

即可保证占满屏幕:

相关推荐
濮水大叔9 小时前
函数式与对象式:前端架构的两种成本曲线
vue.js·react.js·函数式编程
落花看风雪10 小时前
从零开始搭建后台系统(vue3+TypeScript+Vite)01
typescript·vue·js
vx_Biye_Design10 小时前
django房屋租赁推荐系统78455-计算机课程设计、毕业设计
vue.js·spring boot·后端·python·django·课程设计·express
林恒smileZAZ11 小时前
浏览器为什么加载不了超大图片
前端·vue.js·html5
Java后端的Ai之路15 小时前
前端技术Vue-13-安装webpack与vuejs
前端·vue.js·webpack
倚窗听花_15 小时前
IIS部署前端Vue项目
前端·javascript·vue.js
u01110267517 小时前
Vue 3 统一右侧编辑面板:布局、滚动与底部操作区设计
javascript·vue.js·ecmascript
change_fate17 小时前
Vue 3 Composable 函数指南
前端·javascript·vue.js
tryCbest17 小时前
Vue3——第 9 篇:组件通信全攻略(下)——Provide / Inject 与事件总线
前端·javascript·vue.js
溪语流沙18 小时前
【Web全栈进阶】Nginx反向代理 + HTTPS:正式上线
前端·vue.js·python·nginx·https·fastapi