Vue 项目中运用element Container 布局容器 无法充满整个页面

问题描述

element官网
https://element.eleme.cn/#/zh-CN/component/container

从网站中直接粘过来代码:

<template>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>
      AdminViewMain
    </el-main>
  </el-container>
</template>

发现如下，整个布局只占了页面的一小部分

---

解决方案：

在el-container的代码上加上 style=“height: 100%” 代码

<template>
  <el-container style="height: 100%">
    <el-aside width="200px">Aside</el-aside>
    <el-main>
      AdminViewMain
    </el-main>
  </el-container>
</template>

接着在App.vue文件里加上css

<style>
html,
body {
  margin: 0;
  height: 100%;
}
</style>

然后再运行就可以了，直接充满这个网页