解决Vue+ElementUI容器无法铺满网页的问题

首先是解决html，body铺不满屏幕的问题，就是对于撑开的html，body没有覆盖掉，可以通过在assets下新建一个global.scss文件

设置html，body的宽度为100vw，高度为100vh，代码如下：

html,
body,
#app{
  height: 100vh;
  margin: 0;
  padding: 0;
  width:100vw;
}

然后在App.vue中引入该文件，

代码如下：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import "./assets/global.scss"
export default {
  name: 'App'
}
</script>

<style scoped>

</style>

这样子可以使得html，body能够铺满整个页面，此时还需要让el-container容器也铺满整个页面，在对应的vue文件中加入如下代码：

.el-container {
    padding: 0;
    margin: 0;
    height: 100vh;
    width:100vw;
}

我是做了一个SPA单页Web应用，所以在显示的Index.vue中加入代码：

这样子就可以使得页面铺满整个网页，效果如下：

然而，在加入菜单，表格等内容后，只做这样的修饰是不够的，因为我的表格等元素也用了一个el-container容器包裹，所以这部分表格所占的视图也被自动设置为100vh和100vw，这样子就导致了实际宽高超出了浏览器网页的范围，导致了滚动条的出现，如下图所示，

所以，要想呈现完美的效果，还需要附加上一些对元素的CSS修饰，这个就需要根据项目来看了，下面是我项目中Index.vue的代码： 

<script setup lang="ts">
import { reactive } from 'vue';
import Employee from "./Employee.vue";
import Department from './Department.vue';
import SysUser from './SysUser.vue';
import SysRole from './SysRole.vue';
import SysPermission from './SysPermission.vue';
import { OfficeBuilding } from '@element-plus/icons-vue';

const datas = reactive({
    // selectedTab存储当前显示对象的键
    selectedTab:null,
    // tabs数组存储对象的键
    tabs:[],
    // modules类似于一个Map，里面存储了许多对象
    // title对应tab的标签，name对应tab的键，component对应tab显示的内容
    modules:{
        employee:{
            title:"员工管理",
            name:"employee",
            component:Employee
        },
        department:{
            title:"部门管理",
            name:"department",
            component:Department
        },
        sysUser:{
            title:"用户管理",
            name:"sysUser",
            component:SysUser
        },
        sysRole:{
            title:"角色管理",
            name:"sysRole",
            component:SysRole
        },
        sysPermission:{
            title:"权限管理",
            name:"sysPermission",
            component:SysPermission
        }
    }
});

const selectMenu = (index) => {
    if(datas.tabs.indexOf(index) < 0){
        // 当点击标签时，如果数据中没有该标签页的索引，则将其添加到tabs中并显示该标签页
        datas.tabs.push(index);
    }
    datas.selectedTab = index;
};

const removeTab = (name) => {
    let index = datas.tabs.indexOf(name);
    // 删除对应索引的一条数据
    datas.tabs.splice(index, 1);
    // 显示所有标签页中的第一个
    datas.selectedTab = datas.tabs[0];
}

</script>

<template>
    <el-container>
        <el-header style="height:120px">
            <div id="top">
                <div id="logo">Alan人事管理系统</div>
            </div>
        </el-header>

        <el-container>
            <el-aside width="200px">
                <el-menu  background-color="#545c64" text-color="#fff"
                active-text-color="#ffd04b" @select="selectMenu">
                    <el-menu-item>
                        <el-icon><Ship/></el-icon>
                        <span>欢迎页面</span>
                    </el-menu-item>
                    
                    <!--@select事件会自动传递菜单标签中的index属性值-->
                    <!--这里设置index属性是modules对象中的属性名称，这样用户点击菜单就会传递对象的键给函数-->
                    <el-menu-item index="employee">
                        <el-icon><Star/></el-icon>
                        <span>员工管理</span>
                    </el-menu-item>

                    <el-menu-item index="department">
                        <el-icon><OfficeBuilding/></el-icon>
                        <span>部门管理</span>
                    </el-menu-item>

                    <el-sub-menu index="permission_management">
                        <template #title>
                            <el-icon><Setting/></el-icon>
                            <span>权限管理</span>
                        </template>

                        <el-menu-item-group>
                            <el-menu-item index="sysUser"><el-icon><User/></el-icon>用户管理</el-menu-item>
                            <el-menu-item index="sysRole"><el-icon><EditPen/></el-icon>角色管理</el-menu-item>
                            <el-menu-item index="sysPermission"><el-icon><Bell/></el-icon>权限管理</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                </el-menu>
            </el-aside>

            <el-main>
                <!--将modules（类似于对象Map）的key设置为对象的name-->
                <el-tabs v-model="datas.selectedTab" type="border-card" closable @tab-remove="removeTab">
                    <el-tab-pane :key="datas.modules[key].name" v-for="key in datas.tabs" 
                    :label="datas.modules[key].title" :name="datas.modules[key].name">
                        <component :is="datas.modules[key].component"></component>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>

        <el-footer style="height:120px"></el-footer>
    </el-container>
</template>

<style scoped>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
}

/*由于我设置了页头和页尾，各有120px，所以el-aside和el-main中的高度要做出相应计算 */
.el-aside {
  color: #333;
  text-align: center;
  height: calc(100vh - 240px) !important;
  background-color: #545c64;
}

/*菜单的宽度为200px，所以main中的宽度也要做相应计算 */
.el-main {
  background-color: #fff;
  color: #333;
  text-align: center;
  padding: 0;
  height:calc(100vh - 240px) !important;
  width:calc(100vw - 200px) !important;
}

#top {
  clear: both;
  height: 80px;
  text-align: left;
}

#top #logo {
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  padding: 15px 0 0 40px;
}



/* 让container占满视窗*/
.el-container {
    padding: 0;
    margin: 0;
    height: 100vh;
    width:100vw;
}


</style>

由于我设置了一个footer和header作为页头和页脚，其高度均为120px，所以我需要对el-aside和el-main中的高度做相应的计算，并且由于菜单宽度为200px，所以main中的宽度也要做相应的计算，这样子修饰之后，网页可以呈现出比较好的效果：