JAVA高级面试进阶训练营视频教程

admin

近期在做一个项目，是基于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，与中间的运算符号必须空格，否则不会生效（这可不是我强迫症必须空格哦）。

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