element使main主内容区域撑满高度

本次使用的是这个布局
在这里插入图片描述

我们让Main区域撑满余下高度,只需要给最外层的container加一个高度是height: 100vh;,el-main标签所在的class加一个align-items: stretch;撑满父容器高度,代码如下

<template>
    <el-container class="outside-container">
        <el-header>
            <FHeader />
        </el-header>
        <el-container>
            <el-aside width="200px">
                <FMenus />
            </el-aside>
            <el-main>
                <FTagList />
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
  
<style>
 .outside-container{
        height: 100vh;
        background-color: red;
    }
    .el-main{
        background-color: skyblue;
        align-items: stretch;
    }
   
</style>

效果如下
在这里插入图片描述