The solution that the page cannot be opened when Vue3 uses the el-container layout container in elementUI Plus

When using the new version of elementUI, a situation like this may appear:

 

 Can't achieve the same effect as the official website:

 There is no problem with the source code, we need to manually configure the style of html:

Regarding the vh unit of height, this is much easier to use than "height: 100%", and it also has a responsive effect. I often use it in my usual style

<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>

In order to achieve the global effect, and then put your own components into the corresponding ui to quickly complete the webpage layout

Feel free to private message me with any questions!

Hope to share with you! !