我的后台布局一

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

}