解决H5页面在安卓Android系统上软键盘顶起布局问题
近期在做一个项目，是基于APP内置的二级H5应用，APP由RN搭建，H5应用由react搭建。
H5应用中，有一个页面，需求是页面分header body footer三个模块，header和footer需要固定宽高。由于UI给的图就是px为单位。。项目设计比较大，里面有一些其他的工程，早期第一版没有引入rem单位，后期不敢乱动，而且真的会去抠px值，虽然说不会那么精确，但是会量就是了。。。所以没办法换成rem。
header和footer是固定高度的，那么根据屏幕尺寸不同，中间的body模块就需要自适应了。
现在的问题是：如何实现一个上下固定，中间自适应的布局，而且布局不会被软键盘顶起。
我第一次的布局是这样的：
1 .header{ 2 position: absolute; 3 top: 0; 4 left: 0; 5 height: 50px; 6 } 7 .footer{ 8 position: absolute; 9 bottom: 0; 10 left: 0; 11 height: 200px; 12 } 13 .body{ 14 position: absolute; 15 top:50px; 16 }
可以实现：在iOS上正常，并无异常。这个跟安卓和iOS的系统有关。
但是，安卓上，随软键盘的弹起，布局会被撑起来。
查了一下原因是，安卓上软键盘会顶走absolute和fixe布局的元素！
解决方案1：当键盘弹起时：将被顶起的div设置为position：static。不再是position：absolute。
这样确实是可行的，就是需要判断键盘弹起的状态，这个可以通过判断视图的高度来判断，当软键盘顶起布局时，视图的高度会变小，但是因为我的页面上还有一些其他的操作影响判断，有些麻烦，本人是懒人。。。能用简洁的方法解决自己的问题就不会选择麻烦的。
解决方案2：更改布局，如下：
.header{
height: 50px;
}
.footer{
height: 200px;
}
.body{
height: calc(100% - 250px);
min-height: 200px;
}
因为我的body.div是动态的，可能存在height为0的情况，所以此处设置最小高度。
注意calc是css3属性，注意看与你项目兼容性是否需要加前缀。因为我又在工程里部署postcss(一个自动加兼容前缀的插件），所以以上代码均未加前缀。
且写的时候100% 和 250px，与中间的运算符号必须空格，否则不会生效（这可不是我强迫症必须空格哦）。
以上代码经过本人验证可以解决问题，如果你看到这篇博客，希望对你有帮助~
