我的后台布局一

  <div class="main-layout">
    <div class="header">       <h1>头部</h1>     </div>     <div class="content">       <div class="left">         <h1>左</h1>       </div>       <div class="middle">         <h1>中</h1>       </div>       <div class="right">         <h1>右</h1>       </div>     </div>     <div class="footer">       <h1>底部</h1>     </div>   </div>     <style lang="scss" scoped> /* 样式初始化，也称为四无大法 */ * {   margin: 0;   padding: 0; }
.main-layout {
  .header {     width: 100%;     height: 60px;     background-color: aqua;     text-align: center;   }
  .content {     display: flex;     justify-content: space-between;     height: calc(100vh - 60px - 60px);     color: #fff;   }
  .left {     width: 100px;     height: 100%;     background-color: red;     text-align: center;   }
  .right {     width: 100px;     height: 100%;     background-color: pink;     text-align: center;   }
  .middle {     /* flex为1，就是表示占据宽度剩余的全部 */     flex: 1;     height: 100%;     background-color: royalblue;     text-align: center;   }
  .footer {     width: 100%;     height: 60px;     background-color: aqua;     text-align: center;   }


}
.el-menu {   background-color: #ffffff;   height: 91.8vh;   overflow-y: auto;   overflow-x: hidden;   color: #777F8F; }
.el-menu-item {   color: #777F8F; }
.el-menu-item.is-active {   color: #e1e3ec;   background-color: #072eda; }

标签：center,color,text,100%,布局,height,background,后台
来源： https://www.cnblogs.com/zhyp/p/16621186.html