本次使用的是这个布局
我们让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>
效果如下