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>

即可保证占满屏幕:

相关推荐
米丘31 分钟前
vue3.5.x 单文件组件(SFC)样式编译过程
css·vue.js·postcss
肥羊zzz39 分钟前
Vue2 vs Vue3 中 v-for 的 key 用法对比
前端·vue.js
前端那点事2 小时前
深度解析:Vue中computed的实现原理(易懂不晦涩)
前端·vue.js
前端那点事2 小时前
Vue中深克隆的3种实现方案(附详细注释+测试)
前端·vue.js
❆VE❆2 小时前
基于 contenteditable 实现变量插入富文本编辑器
前端·javascript·vue.js
栀栀栀栀栀栀5 小时前
强迫症犯了(゚∀゚) 2026/4/26
前端·javascript·vue.js
Ruihong6 小时前
Vue 的 :deep/:global/:slotted 怎么转成 React ?一份对照指南?
vue.js·react.js·面试
用户78937733908536 小时前
Vue3 + Three.js 仓储数字孪生:按需渲染架构与五大核心功能复盘
vue.js·three.js
Cobyte6 小时前
9.响应式系统演进:effectScope 的作用与实现原理(Vue3.2)
前端·javascript·vue.js
梅梅绵绵冰6 小时前
若依框架-智慧社区项目
前端·javascript·vue.js