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>

即可保证占满屏幕:

相关推荐
来自星星的坤4 小时前
Vue 3中如何封装API请求:提升开发效率的最佳实践
前端·javascript·vue.js
程序猿熊跃晖6 小时前
Vue中如何优雅地处理 `<el-dialog>` 的关闭事件
前端·javascript·vue.js
前端开心果7 小时前
vue实现静默打印pdf
前端·vue.js·pdf
OpenTiny社区8 小时前
TinyVue v3.22.0 正式发布:深色模式上线!集成 UnoCSS 图标库!TypeScript 类型支持全面升级!
前端·vue.js·开源
工业互联网专业10 小时前
基于JavaWeb的花店销售系统设计与实现
java·vue.js·spring boot·毕业设计·源码·课程设计·花店销售系统
会飞的鱼先生10 小时前
vue3中slot(插槽)的详细使用
前端·javascript·vue.js
cg501711 小时前
Vue 的数据代理机制
前端·javascript·vue.js
编程老菜鸡11 小时前
Vue3-原始值的响应式方案ref
前端·javascript·vue.js
正在努力的前端小白12 小时前
Vue3可编辑字段组件的演进之路:从繁琐到优雅
前端·javascript·vue.js
前端爆冲12 小时前
基于vue和flex实现页面可配置组件顺序
前端·javascript·vue.js