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>

即可保证占满屏幕:

相关推荐
zhengxianyi5152 小时前
ruoyi-vue-pro优化——让菜单支持多个参数,一键直达【经营分析】、【生产报表】、【销售报表】
vue.js·前后端分离·数据大屏·ruoyi-vue-pro优化
箫笙默2 小时前
Vue3基础笔记
笔记·vue·vue3
bug总结2 小时前
身份证号脱敏的正确实现
前端·javascript·vue.js
xkxnq3 小时前
第二阶段:Vue 组件化开发(第 19天)
前端·javascript·vue.js
虚诚4 小时前
vue2中树形表格怎么实现
前端·javascript·vue.js·ecmascript·vue2·树形结构
CUYG5 小时前
v-model封装组件(定义 model 属性)
前端·vue.js
爱学英语的程序员6 小时前
让AI 帮我做了个个人博客(附提示词!)
人工智能·git·vue·github·node·个人博客
五仁火烧7 小时前
npm run build命令详解
前端·vue.js·npm·node.js
志摩凛7 小时前
Element UI 长表单校验失败后自动展开折叠面板并滚动定位
数据结构·vue.js
xiaoyan20157 小时前
2026原创Electron39.2+Vue3+DeepSeek从0-1手搓AI模板桌面应用Exe
vue.js·electron·deepseek