码迷,mamicode.com
首页 > 其他好文 > 详细

记录三段式布局

时间:2020-07-04 17:13:29      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:display   info   垂直   flex   column   高度   html   分享   log   

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

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

html 部分

<div class=‘wrap‘>

  <div class=‘header‘></div>

  <div class=‘main‘></div>

  <div class=‘footer‘></div>

</div>

 

css 部分

.wrap{

  display: flex;  //弹性盒子

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

}

 

 
 

记录三段式布局

标签:display   info   垂直   flex   column   高度   html   分享   log   

原文地址:https://www.cnblogs.com/jshe/p/13235310.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!