虛擬鍵盤改變我的頁面高度

我正在開發手機的網絡應用程序，我遇到了一個奇怪的問題。我有一個簡單的頁面，背景圖片和中間位於頁面中間的輸入字段。問題是每當我點擊輸入框並且虛擬鍵盤出現時，根據剩餘的頁面空間重新計算背景圖像和輸入字段尺寸。虛擬鍵盤改變我的頁面高度

希望的行爲是整個頁面將被推高。

相關的代碼（我與發展中國家反應，因此怪異的名字）

<html> 
<head> 
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1"> 
    <style type="text/css">.location_input__LocationInputStyle___2cLQ9 { 
     position: absolute; 
     width: 85%; 
     height: 10%; 
     top: 45%; 
     left: 50%; 
     transform: translate(-50%); 
     background-color: transparent; 
     border-radius: 50px; 
     border: 3px solid #ffffff; 
     text-align: center; 
     font-size: 22px; 
     color: #ffffff; 

    } 
    </style> 
    <style type="text/css">.home_page_container__HomePageStyle___2f5vW { 
     position: relative; 
     width: 100%; 
     height: 100%; 
     background-image: url(86349e48855062e70072f79443fe0af6.jpg); 
     background-repeat: no-repeat; 
     background-size: cover; 
     background-position: 40% 0; 
    } 
    </style> 
</head> 
<body> 
<div id="app"> 
    <div class="home_page_container__HomePageStyle___2f5vW"> 
     <input type="text" class="location_input__LocationInputStyle___2cLQ9" placeholder="Address"> 
    </div> 
</div> 
</body> 
</html>

相關圖片：

The problem, when keyboard pops up

Desired result

PS：與調試器播放後有一點，我發現，如果我把我的應用程序容器/ body/html的高度設置爲固定的像素高度，它不會發生。然而，這不是一個好的解決方案，因爲我希望高度是視口的100％（所以它將與所有設備兼容）。

我該如何解決這個問題？

來源

2017-03-24 Ofir P

這是隱藏鍵盤時的應用程序： [無鍵盤應用程序]（http://imgur.com/a/9bISr） –