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>

即可保证占满屏幕:

相关推荐
Hoey6 小时前
虚拟 DOM 和 DIFF 算法
前端·vue.js
小新1106 小时前
vue实战项目 计算器
前端·javascript·vue.js
神仙别闹6 小时前
VUE框架 + Element UI + Node 模拟打印机的 Web 即时打印
前端·vue.js·ui
如果超人不会飞6 小时前
TinyVue图标使用完全指南
vue.js
暗冰ཏོ7 小时前
ECharts 前端图表开发全攻略:参数配置、项目实战与高级可视化资源整理
前端·vue.js·echarts·visual studio code
橘猫走江湖7 小时前
前端项目如何做 vibe coding
javascript·vue.js·架构
励志打工人跑跑7 小时前
JWT 身份验证与授权实战
vue.js
小新1107 小时前
vue架的网站修改端口
前端·javascript·vue.js
暗不需求7 小时前
从零实现一个 Vue Todos 任务清单:深入响应式编程与组合式 API
前端·vue.js·面试
xixixin_7 小时前
Promise.all 和 Promise.allSettled 详解
前端·javascript·vue.js