ios微信網頁出現底部返回導航欄

如今，蘋果手機的微信網頁會出現底部返回導航欄，致使頁面的部份內容會被導航欄遮擋住。

試驗了不少次，最後是經過每次加載頁面的時候獲取頁面的實際高度，來控制網頁body體的高度。

只要在加載完成以後，添加這一句就能夠避免出現內容被遮擋的狀況了。

$("body").css("height",document.body.clientHeight+"px");

 

 

在後面的項目中，我發如今不設定高度的前提下，頁面內容往下滾動的時候，底部導航欄會自動隱藏，網上滾動又會出現。

你們能夠嘗試下，根據實際應用狀況，採用不一樣方法：
style樣式：

*{
margin: 0;padding: 0;
}
html,body{
position: relative;
width: 100%;
}
#content{
width: 100%;
padding-bottom: 50px;
}
.nav{
width: 100%;
height: 50px;
display: flex;
align-items: center;
position: fixed;
bottom: 0;
background: #FFFFFF;
}
.nav span{
display: inline-block;
margin: 0 auto;
}

 

body體代碼：

<div id="content" style=""></div>
<!--固定導航欄-->
<div class="nav"><span>導航欄</span></div>

 

script代碼：

window.onload = function(){ var innerHTML = ''; for(var i=0;i<50;i++){ innerHTML += '<p>測試內容</p>'; } document.getElementById('content').innerHTML = innerHTML }