el-container占满全屏

560 阅读1分钟

el-container占满全屏

<div class="common-layout">
   <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>

全局样式中

* {
    margin: 0;
    padding: 0;
    border: nome;
    box-sizing: border-box;
}
html,body,#app {
    width: 100%;
    height: 100%;
    font-size: 14px;
}

在用到組件的地方写样式

.common-layout {
    height: 100%;
    .el-container {
        min-height: 100% !important;
    }
}