解決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，與中間的運算符號必須空格，不然不會生效（這可不是我強迫症必須空格哦）。

　　以上代碼通過本人驗證能夠解決問題，若是你看到這篇博客，但願對你有幫助~