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>

即可保证占满屏幕:

相关推荐
简单Janeee1 天前
[Vue 3 从零到上线]-第四篇:组件化思维——把网页像积木一样拆解
javascript·vue.js·ecmascript
一枚前端小姐姐1 天前
Vue3 + Pinia 状态管理,从入门到模块化
前端·vue.js
boooooooom1 天前
Vue3 nextTick 实现大变化:微任务优先,彻底搞懂渲染时机!
javascript·vue.js·面试
一枚前端小姐姐1 天前
Vue3 组合式 API(setup + script setup)实战
前端·vue.js
阿懂在掘金1 天前
别再写换皮 Options 了!Vue3 Setup 真正的用法的是这3步升级
vue.js
一枚前端小姐姐1 天前
Vue3 + Vite 从零搭建项目,超详细入门指南
前端·vue.js
PD我是你的真爱粉1 天前
Vue 3 生命周期完全指南:从流程图到最佳实践
前端·vue.js·流程图
anyup1 天前
uniapp开发的鸿蒙应用上架后,竟然月入4000+
前端·vue.js·harmonyos
用户83040713057011 天前
外链跳转后首页参数丢失:从缓存兜底到页面重加载的完整方案
vue.js