解決H5頁面在安卓Android系統上軟鍵盤頂起布局問題

近期在做一個項目，是基於APP內置的二級H5應用，APP由RN搭建，H5應用由react搭建。

H5應用中，有一個頁面，需求是頁面分header body footer三個模塊，header和footer需要固定寬高。由於UI給的圖就是px為單位。。項目設計比較大，里面有一些其他的工程，早期第一版沒有引入rem單位，后期不敢亂動，而且真的會去摳px值，雖然說不會那么精確，但是會量就是了。。。所以沒辦法換成rem。

header和footer是固定高度的，那么根據屏幕尺寸不同，中間的body模塊就需要自適應了。

現在的問題是：如何實現一個上下固定，中間自適應的布局，而且布局不會被軟鍵盤頂起。

我第一次的布局是這樣的：

.header{
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 200px;
}
.body{
    position: absolute;
    top:50px;
}

可以實現：在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，與中間的運算符號必須空格，否則不會生效（這可不是我強迫症必須空格哦）。

　　以上代碼經過本人驗證可以解決問題，如果你看到這篇博客，希望對你有幫助~