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>

即可保证占满屏幕:

相关推荐
GISer_Jing3 小时前
前端性能指标及优化策略——从加载、渲染和交互阶段分别解读详解并以Webpack+Vue项目为例进行解读
前端·javascript·vue
&白帝&6 小时前
vue右键显示菜单
前端·javascript·vue.js
Wannaer6 小时前
从 Vue3 回望 Vue2:事件总线的前世今生
前端·javascript·vue.js
光影少年7 小时前
vue中,created和mounted两个钩子之间调用时差值受什么影响
前端·javascript·vue.js
cdcdhj8 小时前
vue用通过npm的webpack打包编译,这样更适合灵活配置的项目
vue.js·webpack·npm
运维@小兵11 小时前
vue使用路由技术实现登录成功后跳转到首页
前端·javascript·vue.js
能来帮帮蒟蒻吗12 小时前
VUE3 -综合实践(Mock+Axios+ElementPlus)
前端·javascript·vue.js·笔记·学习·ajax·typescript
Java&Develop14 小时前
Vue ElementUI原生upload修改字体大小和区域宽度
vue.js
郭尘帅66615 小时前
vue3基础学习(上) [简单标签] (vscode)
前端·vue.js·学习
st紫月16 小时前
用vue和go实现登录加密
前端·vue.js·golang