element UI中Container布局容器自动填充满屏

找了几篇文章找到一篇可以实现的方法：element UI 中间内容自动填充满屏

文章具体内容：

element UI 设置容器布局时候比较方便，但如果设置不好会出现中间内容无法填充满整个屏幕剩余空间的问题，很可能会导致footer组件悬空在屏幕中间位置，不美观。根据网络上找到的资料，主要有如下几个步骤：

1. 首先说明下布局： header 、（aside，main) 、footer。中间aside和main在同一水平位置。

<template>
 <el-container>
       <el-header>  head  </el-header>
       <el-container>  
           <el-aside> aside</el-aside>
           <el-main>main</el-main>           
       </el-container>
       <el-footer>footer</el-footer>
  </el-container>
</template>

aside和main要在同一个水平位置，可以使用一个el-container或者一个el-row 都可以。

2. 在App.vue中，对index.html中绑定#app的div元素进行设置，增加一段配置：

div {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
  }

简单测试可以发下， 如果不设置top等，上面布局的元素都会缩在一起，无法实现满屏效果。

3. 在上述布局文件中，设置el-container的样式：

.el-container {   
    height: 100%;    
  }

如果aside 和main的父组件不是container，而是el-row，那么需要额外设置el-row的高度为100%。