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>

即可保证占满屏幕:

相关推荐
Luna-player11 小时前
gitee上的vue项目,刚刚创建了一个分支,怎么在本地上拉取分支项目
前端·vue.js·gitee
徐小夕11 小时前
借助AI,1周,0后端成本,我开源了一款Office预览SDK
前端·vue.js·github
还是大剑师兰特11 小时前
Vue3 按钮切换示例(启动 / 关闭互斥显示)
开发语言·javascript·vue.js
SuperEugene11 小时前
前端代码注释规范:Vue 实战避坑,让 3 年后的自己还能看懂代码|项目规范篇
前端·javascript·vue.js
凉辰11 小时前
uniapp实现生成海报功能 (开箱即用)
javascript·vue.js·小程序·uni-app
OpenTiny社区11 小时前
TinyRobot Skills技巧大公开:让 AI 成为你的 “UI 搭建”副驾驶
前端·vue.js·ai编程
乌拉那拉丹12 小时前
vue3 配置跨域 (vite.config.ts中配置)
前端·vue.js
angerdream12 小时前
最新版vue3+TypeScript开发入门到实战教程之DOM操作
javascript·vue.js
Lee川13 小时前
Vue Router 4 核心精讲:从原理到面试实战
前端·vue.js