elementui container layout, el-header / el-footer is not displayed properly in the component

Use elementui layout, how to navigate, the left menu is arranged on the left and right, similar to the following figure

 

Entrance

<template>
  <el-container direction="vertical">
    <OutLayoutHeader></OutLayoutHeader>
    <el-container direction="vertical">
      <el-container>
        <OutLayoutSlideMenu></OutLayoutSlideMenu>
        <el-main>Main</el-main>
      </el-container>
      <OutLayoutFooter></OutLayoutFooter>
    </el-container>
  </el-container>
</template>

<script>
import OutLayoutHeader from './components/OutLayout/Header.vue'
import OutLayoutSlideMenu from './components/OutLayout/SlideMenu.vue'
import OutLayoutFooter from './components/OutLayout/Footer.vue'

export default {
  name: 'app',
  components: {
    OutLayoutHeader,
    OutLayoutSlideMenu,
    OutLayoutFooter
  }
}
</script>

The header part is very simple, just for display

<template>
  <el-header>Header</el-header>
</template>

The footer part is the same, very simple, just for display

<template>
  <el-footer>Footer</el-footer>
</template>

In the example code on the official website, footer is placed in a container with main.

The entrance part adds two attributes to the two el-containers, direction = "vertaical".
Official website description: outer container. When the child element contains <el-header> or <el-footer>, all child elements will be arranged vertically and vertically, otherwise they will be arranged horizontally and left and right.

If the direction attribute is not added here, both the header and the footer are in the component, so they will be arranged according to left and right for a long time. The footer is moved out from the innermost layer because the el-main and slideMenu component parts do not need to be
arranged vertically up and down.