移动端页面布局 flex布局

基础

1.删掉理想视口

2.引入js文件

3.设置html，body{height:100%}

4.body{ display:flex; flex-direction：column；}

5.测量高度直接除100 单位换成rem

html.body{
height:100%；
}

body{
display:flex;
flex-direction:column;
}

header{
width:100%;
height:0.88rem;
background:#fff;
}

main{
width:100%;
flex:1;  //占满剩余空间
overflow:auto;
}

footer{
width：100%;
htight:0.88rem;
bgc
}

进阶

1.横向滚动条

思路：设置版心，版心display：flex; 

           版心父元素overflow-x:auto; overflow-y:hidden;

结构：

 

 css样式：

效果：

 

 

 2.页面内的竖向滚动条

思路：给main display:flex并且flex-direction：column；

           然后设置mian里几块元素的高，对于超出的部分overflow：auto;

效果：