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 }