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>

即可保证占满屏幕:

相关推荐
tzy2336 小时前
Vue和React之争
前端·vue.js·react.js
网络点点滴7 小时前
Vue3中toRaw和MarkRaw
前端·javascript·vue.js
AI服务老曹8 小时前
掌握核心代码:基于 Spring Boot + Vue 的 AI 视频管理平台源码架构与二次开发实战(全开源/低代码/私有化)
vue.js·人工智能·spring boot
蜡台8 小时前
Vue 组件通信的 12 种解决方案
前端·javascript·vue.js·props
YAY_tyy12 小时前
Vue3 + Three.js 实战:自定义 3D 模型加载与交互全流程
前端·javascript·vue.js·threejs
2301_7806698619 小时前
前端logo替换开发
前端·vue.js
代码煮茶1 天前
Vue3 路由实战 | Vue Router 从 0 到 1 搭建权限管理系统
前端·javascript·vue.js
华洛1 天前
聊聊我逃离前端开发前的思考
前端·javascript·vue.js
pacong1 天前
vscode使用
javascript·vue.js·vscode
北海军1 天前
render el-select下拉框
前端·javascript·vue.js