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