Element-ui container常见布局

1、header\main布局

<template>
   <div>
     <el-container>
       <el-header>Header</el-header>
       <el-main>Main</el-main>
     </el-container>
   </div>
 </template>
 <style>
   .el-header {
     background-color: #B3C0D1;
     color: #333;
     text-align: center;
     line-height: 60px;
   }
   </style>

2、header\main\footer布局

<template>
   <div>
     <el-container>
       <el-header>Header</el-header>
       <el-main>Main</el-main>
       <el-footer>Footer</el-footer>
     </el-container>
   </div>
 </template>
 <style>
   .el-header, .el-footer {
     background-color: #B3C0D1;
     color: #333;
     text-align: center;
     line-height: 60px;
   }
   </style>

3、Aside/main布局

4、header/aside/main 布局

<template>
   <div>
     <el-container>
       <el-header>Header</el-header>
       <el-container>
           <el-aside width="200px">Aside</el-aside>
           <el-main>Main</el-main>
         </el-container>
     </el-container>
     </div>
 </template>
 <style>
 .el-header, .el-footer {
     background-color: #B3C0D1;
     color: #333;
     text-align: center;
     line-height: 60px;
   }
   .el-aside {
     background-color: #D3DCE6;
     color: #333;
     text-align: center;
     line-height: 200px;
   }
   .el-main {
     background-color: #E9EEF3;
     color: #333;
     text-align: center;
     line-height: 160px;
   }
   body > .el-container {
     margin-bottom: 40px;
   }
   .el-container:nth-child(5) .el-aside,
   .el-container:nth-child(6) .el-aside {
     line-height: 260px;
   }
   .el-container:nth-child(7) .el-aside {
     line-height: 320px;
   }
 </style>

5、header/aside/main/footer布局

<template>
   <div>
     <el-container>
       <el-header>Header</el-header>
       <el-container>
         <el-aside width="200px">Aside</el-aside>
         <el-container>
           <el-main>Main</el-main>
           <el-footer>Footer</el-footer>
         </el-container>
       </el-container>
     </el-container>
   </div>
 </template>
 <style>
 .el-header, .el-footer {
     background-color: #B3C0D1;
     color: #333;
     text-align: center;
     line-height: 60px;
   }
   .el-aside {
     background-color: #D3DCE6;
     color: #333;
     text-align: center;
     line-height: 200px;
   }
   .el-main {
     background-color: #E9EEF3;
     color: #333;
     text-align: center;
     line-height: 160px;
   }
   body > .el-container {
     margin-bottom: 40px;
   }
   .el-container:nth-child(5) .el-aside,
   .el-container:nth-child(6) .el-aside {
     line-height: 260px;
   }
   .el-container:nth-child(7) .el-aside {
     line-height: 320px;
   }
 </style>

6、aside/header/main/footer布局

<template>
   <div>
     <el-container>
       <el-aside width="200px">Aside</el-aside>
       <el-container>
         <el-header>Header</el-header>
         <el-main>Main</el-main>
         <el-footer>Footer</el-footer>
       </el-container>
     </el-container>
   </div>
 </template>
 <style>
 .el-header, .el-footer {
     background-color: #B3C0D1;
     color: #333;
     text-align: center;
     line-height: 60px;
   }
   .el-aside {
     background-color: #D3DCE6;
     color: #333;
     text-align: center;
     line-height: 200px;
   }
   .el-main {
     background-color: #E9EEF3;
     color: #333;
     text-align: center;
     line-height: 160px;
   }
   body > .el-container {
     margin-bottom: 40px;
   }
   .el-container:nth-child(5) .el-aside,
   .el-container:nth-child(6) .el-aside {
     line-height: 260px;
   }
   .el-container:nth-child(7) .el-aside {
     line-height: 320px;
   }
 </style>