一种常见整体布局
布局如下:
<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;
}