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>

即可保证占满屏幕:

相关推荐
成为大佬先秃头5 小时前
渐进式JavaScript框架:Vue — API
开发语言·javascript·vue.js
Komorebi゛5 小时前
【Vue3 + Element Plus】Form表单按下Enter键导致页面刷新问题
前端·javascript·vue.js
dly_blog6 小时前
Vue 组件通信方式大全(第7节)
前端·javascript·vue.js
橙某人6 小时前
LogicFlow 交互新体验:告别直连,丝滑贝塞尔轨迹实战!🍫
前端·javascript·vue.js
计算机毕设VX:Fegn08956 小时前
计算机毕业设计|基于springboot + vue高校实验室教学管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
雨飞飞雨7 小时前
深度学习响应式系统
前端·vue.js·前端框架
huali7 小时前
社区划分:让AI理解你的代码重构意图
前端·javascript·vue.js
J总裁的小芒果7 小时前
后端返回参数不一致 前端手动处理key
前端·vue.js·elementui
chenbin___7 小时前
JavaScript 中!!、?? 和 || 使用介绍
前端·javascript·vue.js