elemenui使用el-container布满整个屏幕

1.在使用el-container的时候会发现，如果我们想要让一个布局布满整个屏幕，实现自适应的效果，但是会发现要实现这个方法还要一定的css的功底，像我的功底就比较菜了，然后去网站找结果，但是啥度没有找到，写此文章留作自己的笔记，大神有更好的实现方法可以一起交流。
我的实现代码如下：
<div class="index">
        <el-container direction="vertical">
            <el-header style="background-color: aquamarine">Header</el-header>
            <el-container>
                <el-aside style="background-color: red;width: 10vw">
                    slider
                </el-aside>
                <el-container>
                    <el-main style="background-color: azure">Main</el-main>
                    <el-footer style="background-color: blueviolet">Footer</el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
<style scoped lang="scss">
    
    .index{
        height: calc(100vh);
    }
    html, body, #app, .el-container {

        /*统一设置高度为100%*/
        height: 100%;
    }
</style>

重要的就是那个vh,vw。这两个的全称是viewport.
viewport：可视窗口，也就是浏览器。
    vw Viewport宽度， 1vw 等于viewport宽度的1%
    vh Viewport高度， 1vh 等于viewport高的的1%
结果如下：