DIV+CSS布局小技巧

一、固定导航条的技巧

1、将页面划分为两个部分(可设置为导航条部分和其他部分)。

2、设置整个页面的css样式如下：

#app{
    display:flex;
    flex-direction:column;
    height:100vh;
}

3、设置导航条的样式为：

#nav{
    flex-shrink:0;
}

4、设置其他部分的样式为：

div{
    flex:1;
    overflow-y:auto;
}