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>

即可保证占满屏幕:

相关推荐
华仔啊2 小时前
Vue3 如何实现图片懒加载?其实一个 Intersection Observer 就搞定了
前端·vue.js
我叫张小白。3 小时前
Vue3 响应式数据:让数据拥有“生命力“
前端·javascript·vue.js·vue3
北辰alk5 小时前
Vue 中 nextTick 的魔法:为什么它能拿到更新后的 DOM?
vue.js
Dwzun5 小时前
基于SpringBoot+Vue的体重管理系统【附源码+文档+部署视频+讲解)
vue.js·spring boot·后端
网络点点滴5 小时前
Vue3嵌套路由
前端·javascript·vue.js
n***F8756 小时前
Vue项目中 安装及使用Sass(scss)
vue.js·sass·scss
by__csdn6 小时前
Vue 中计算属性、监听属性与函数方法的区别详解
前端·javascript·vue.js·typescript·vue·css3·html5
你挚爱的强哥9 小时前
【sgSelectExportDocumentType】自定义组件:弹窗dialog选择导出文件格式word、pdf,支持配置图标和格式名称,触发导出事件
vue.js·pdf·word
小杨快跑~9 小时前
Vue 3 + Element Plus 表单校验
前端·javascript·vue.js·elementui
我叫张小白。10 小时前
Vue3监视系统全解析
前端·javascript·vue.js·前端框架·vue3