一种常见的整体布局

一种常见整体布局

布局如下：

<div class="console">
   <Top />
   <div class="main">
     <Left style="border-right: 1px solid #eee"/>
      <router-view class="router-view" />
   </div>
  </div>

其中，console为整体视图，Top为顶部栏组件，main为中间两个位置，Left为左边导航栏，router-view为右边内容视图。

// 整体设置为随窗口改变而缩放，overfloat隐藏了滚动条
.console{
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
// 中间部分设置为display布局，同时设置上面、左右两边的padding属性
.main{
  display: flex;
  width: 100vw;
  padding: 4vh 12vw;
}
// 由于main设置了display属性，因此中间两个会紧密挨在一起，对router-view只要设置本身的属性就好。
.router-view {
  height: 100vh;
  width: 100vw;
  background: #fff;
}