移动端 三段式布局 (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; }}
温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/yidong/11177.html