分享一種平時用的三段式布局(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;
}
}