记录三段式布局

分享一种平时用的三段式布局(flex)

主要思路是  上中下    header&footer 给高度  main 占其余部分

html 部分

  

  

  

 

css 部分

.wrap{

  display: flex;  //弹性盒子

  flex-direction: column;  //垂直排列
  height: 100%;    //容器盒子要有高度
  .header{
    height: .48rem;
  }
  .main{
    flex: 1;    //占剩余的部分
    overflow-y: auto;
  }
  .footer{
    height: .48rem;
  }

}

 

 
 

你可能感兴趣的:(记录三段式布局)