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>

即可保证占满屏幕:

相关推荐
代码煮茶1 小时前
Vite 5.0 新特性深度解析:更快、更干净、更未来的前端构建利器
vue.js
Pu_Nine_95 小时前
IntersectionObserver 详解:封装 Vue 指令实现图片懒加载
前端·javascript·vue.js·性能优化
前端那点事6 小时前
Vue nextTick 超全解析|作用、使用场景、底层原理、Vue2/Vue3区别
前端·vue.js
前端那点事6 小时前
Vue面试高频:子组件能直接修改父组件数据吗?单向数据流原理+正确写法全覆盖
前端·vue.js
前端那点事6 小时前
为什么 Vue 的 template 标签不能用 v-show?底层机制+踩坑复盘+生产级解决方案
前端·vue.js
ttwuai7 小时前
XYGo Admin 菜单与路由:Vue3 动态路由 + GoFrame 权限菜单的完整实现方案
前端·vue·后台框架
北风toto8 小时前
为什么 IntelliJ IDEA Community 无法开发 Vue?——附解决方案
java·vue.js·intellij-idea
跟着珅聪学java8 小时前
Element UI 的 Tabs 标签页开发教程
javascript·vue.js·elementui
jiayong239 小时前
前端面试题库 - Vue框架篇
前端·vue.js·面试
三*一9 小时前
Mapbox GL JS 前端多边形分割实战:从踩坑到优雅实现
开发语言·前端·javascript·vue.js