移动端页面布局

移动端页面布局

：
上下两条固定到上边和下边，中间的内容区域占据剩余的空间；
all、html,body,#container{height:100%;}
第一种方法、
1、header高度固定像素，footer固定像素。section高度calc(100% - header高度 - footer高度)；
2、header,footer设置绝对定位的方式(absolute)，分别top:0; bottom:0;
3、将section设置overflow-y:auto;
第二种方法、
1、header高度固定像素，footer固定像素。section也设置定位，top:header高度，bottom:footer高度
2、header,footer设置绝对定位的方式(absolute)，分别top:0; bottom:0;
3、将section设置overflow-y:auto;
第三种方法、
1、header高度固定像素，footer固定像素。header,footer设置绝对定位的方式(absolute)，分别top:0; bottom:0;
2、section高度为100%，设定section上下内填充为header和footer的高度；
3、将section设置overflow-y:auto;
第四种方法:弹性盒
1.把最大的父元素设置display:flex,flex-direction:column;
2、section设置flex:1;overflow-y:auto;

问题：
固定定位，弹性盒在写结构的时候，如果当前页面需要弹出内置键盘，会将footer部分固定到键盘的上边，如果不希望footer部分的位置发生变化 ，不能采用这两种 方式，得用以上的1，2，3种办