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>

即可保证占满屏幕:

相关推荐
Traced back1 小时前
[特殊字符] Vue3 常用指令大全
前端·javascript·vue.js
码界筑梦坊1 小时前
336-基于Python的肺癌数据可视化分析预测系统
开发语言·python·信息可视化·数据分析·django·vue·毕业设计
wuhen_n2 小时前
《Vue3+TS+Vite 高效编程与优化实践》专栏收尾
前端·javascript·vue.js
小雨cc5566ru2 小时前
基于Nodejs+vue+ElementUI的大学生课程排课管理系统设计
前端·vue.js·elementui
qq_8406122332 小时前
Nodejs+vue+ElementUI框架的家政服务评价系统 保洁员预约系统的设计与实现
前端·vue.js·elementui
计算机应用技术三班-欧婷2 小时前
ElementUI从入门到实战全攻略
前端·vue.js·ui
永恒毕设程序2 小时前
基于ssm+vue基于elementui的工厂物料管理系统设计与实现【开题+程序+论文】
前端·vue.js·elementui
zhangren024682 小时前
Laravel8.x核心特性全解析
vue.js·spring boot·mysql
说给风听.2 小时前
零基础吃透 ElementUI:Vue 开发者必备组件库手册
前端·vue.js·elementui
BillKu2 小时前
Element Plus对话框样式设置指南
前端·vue.js·elementui