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>

即可保证占满屏幕:

相关推荐
HYI几秒前
「三年了,今晚突然开窍!」 一个拖拽排序的顿悟时刻
javascript·vue.js
FFF-X39 分钟前
Vue3 路由缓存实战:从基础到进阶的完整指南
vue.js·spring boot·缓存
临期程序员1 小时前
TypeError: crypto.getRandomValues is not a function
前端·vue.js
杨荧2 小时前
基于Python的电影评论数据分析系统 Python+Django+Vue.js
大数据·前端·vue.js·python
大聪明了2 小时前
uniapp vue3 使用 pinia
javascript·vue.js·uni-app
nyf_unknown3 小时前
(vue)将文件夹打成tar包, Git Bash(推荐)具体使用
vue.js·git·bash
EF@蛐蛐堂3 小时前
【vue3】v-model 的 “新玩法“
前端·javascript·vue.js
两个月菜鸟4 小时前
vue+微信小程序 五角星
前端·vue.js·微信小程序
Warren989 小时前
Lua 脚本在 Redis 中的应用
java·前端·网络·vue.js·redis·junit·lua