解决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，与中间的运算符号必须空格，不然不会生效（这可不是我强迫症必须空格哦）。

　　以上代码通过本人验证能够解决问题，若是你看到这篇博客，但愿对你有帮助~