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>

即可保证占满屏幕:

相关推荐
参宿71 小时前
图解Vue3 响应式,手动实现核心原理
前端·javascript·vue.js
2301_801252221 小时前
前端框架Vue(Vue 的挂载点与 data 数据对象)
java·前端·javascript·vue.js·前端框架
前端白袍1 小时前
Vue:关于 Vue2 父子组件传值方法 以及 props 的定义方法和使用
前端·javascript·vue.js
慧一居士2 小时前
Vue项目页面间,页面中跳转及刷新规划,何时使用router-view,router-link,iframe,slots ,使用场景,及对应场景的完整使用示例
前端·vue.js
Data_Adventure2 小时前
Vue 3 组件重构实战:从重复代码到优雅抽象的三种方案
前端·vue.js
zhangyao9403302 小时前
详细-vue3项目初始化配置流程
vue.js
一枚前端小能手2 小时前
🔄 重学Vue之依赖注入(provide、inject)
前端·javascript·vue.js
两个西柚呀3 小时前
Vue组件的一些底层细节
前端·javascript·vue.js
paopaokaka_luck3 小时前
基于SpringBoot+Vue的DIY手工社预约管理系统(Echarts图形化、腾讯地图API)
java·vue.js·人工智能·spring boot·后端·echarts
计算机学姐7 小时前
基于微信小程序的高校班务管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis