Vue3使用elementUI Plus中的el-container布局容器时不能撑开页面的解决方案_element plus contaner容器 实现不了

在使用新版elementUI时，可能会出现像这样的情况：

 无法达到像官网那样的效果：

 源代码没有问题，我们需要手动配置html的样式：

关于高度的vh单位，这个比   "height: 100%"， 要好用的多，并且也具有响应式效果，我自己在平常的样式中也经常使用

<template>
  <div class="app_container">
    <div class="common-layout">
      <el-container>
        <el-aside width="200px" class="aside">Aside</el-aside>
        <el-container>
          <el-header class="header">Header</el-header>
          <el-main class="main">Main</el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
 
<script>
  export default{
    name: 'app',
    setup(){
      
    },
  }
</script>
 
<style scoped>
  /* 手动配置全局样式 */
  html,
  body,
  .app_container,
  .el-container{
    padding: 0;
    margin: 0;
    height: 100vh;
  }
  /* 背景颜色 */
  .aside{
    background-color: pink;
  }
  .main{
    background-color: forestgreen;
  }
  .header{
    background-color: aqua;
  }
</style>

才能达到全局效果，然后将自己的组件放到相应的ui里面去即可快速完成网页布局

有什么问题都可以私信我呀！

希望和诸君共勉 ！！