当前位置：首页 > 移动开发 > 正文

移动端 三段式布局 （flex方式）

分享一种平时用的三段式布局(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;　　　　//占剩余的部分
　　}
　　.footer{
　　　　height: .48rem;
　　}

}

上一篇
elasticsearch mappings之dynamic的三种状态

下一篇
appium--自动检测端口和释放端口

相关文章

最新文章