一种常见的整体布局

一种常见整体布局

布局如下:
一种常见的整体布局

<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;
}
上一篇:height:100vh,width:100vw


下一篇:关于STATUS_FLOAT_UNDERFLOW(0xC0000093)异常