无法加载键盘布局

解决H5页⾯在安卓Android系统上软键盘顶起布局问题

近期在做⼀个项⽬，是基于APP内置的⼆级H5应⽤，APP由RN搭建，H5应⽤由react搭建。

H5应⽤中，有⼀个页⾯，需求是页⾯分headerbodyfooter三个模块，header和footer需要固定宽⾼。由于UI给的图就是px为单位。。项⽬

设计⽐较⼤，⾥⾯有⼀些其他的⼯程，早期第⼀版没有引⼊rem单位，后期不敢乱动，⽽且真的会去抠px值，虽然说不会那么精确，但是会

量就是了。。。所以没办法换成rem。

header和footer是固定⾼度的，那么根据屏幕尺⼨不同，中间的body模块就需要⾃适应了。

现在的问题是：如何实现⼀个上下固定，中间⾃适应的布局，⽽且布局不会被软键盘顶起。

我第⼀次的布局是这样的：

{

2position:absolute;

3top:0;

4left:0;

5height:50px;

6}

{

8position:absolute;

9bottom:0;

10left:0;

11height:200px;

12}

{

14position:absolute;

15top:50px;

16}

可以实现：在iOS上正常，并⽆异常。这个跟安卓和iOS的系统有关。

但是，安卓上，随软键盘的弹起，布局会被撑起来。

查了⼀下原因是，

解决⽅案1：当键盘弹起时：将被顶起的div设置为position：static。不再是position：absolute。

这样确实是可⾏的，就是需要判断键盘弹起的状态，这个可以通过判断视图的⾼度来判断，当软键盘顶起布局时，视图的⾼度会变⼩，但是

因为我的页⾯上还有⼀些其他的操作影响判断，有些⿇烦，本⼈是懒⼈。。。能⽤简洁的⽅法解决⾃⼰的问题就不会选择⿇烦的。

解决⽅案2：更改布局，如下：

.header{

height:50px;

}

.footer{

height:200px;

}

.body{

height:calc(100%-250px);

min-height:200px;

}

因为我的是动态的，可能存在height为0的情况，所以此处设置最⼩⾼度。

注意calc是css3属性，注意看与你项⽬兼容性是否需要加前缀。因为我⼜在⼯程⾥部署postcss(⼀个⾃动加兼容前缀的插件），所以以

上代码均未加前缀。

且写的时候100%和250px，与中间的运算符号必须空格，否则不会⽣效（这可不是我强迫症必须空格哦）。

以上代码经过本⼈验证可以解决问题，如果你看到这篇博客，希望对你有帮助~