client-base-v5/test/ContainerLayout.vue

<template>
  <div class="container">
    <div class="header">
      header
    </div>
    <div class="content">
      <div class="main">
        main
      </div>
      <div class="aside">
        aside
      </div>
    </div>
    <div class="footer">
      footer
    </div>
  </div>
</template>
<style>
.container{
  display:flex;
  /* 垂直*/
  flex-direction: column;
  width:100%;
  /*视口被均分为100单位的vh 占据整个窗口 扣掉顶部topNav的距离后，计算得到container的高度*/
  height:calc(100vh - 100px);
}

.header{
  /*放大缩小比例为0 */
  height: 400px;
  flex:0 0 100px;
}

.footer{
  height: 100px;
  flex:0 0 100px;
}

.content{
  display: flex;
  flex:1;
}
.aside{
  flex:0 0 80px;
}
.main{
  overflow:scroll;
  flex:1;
}
</style>