拾年丶不久 2019-08-19 15:57 采纳率: 100%
浏览 3269
已采纳

移动端页面底部导航被浏览器工具栏遮盖有好的解决办法吗

页面底部有导航,用的position:fixed;因为页面有时候需要输入内容所以用JS控制的他的top,代码如下

//CSS:
.nav {
    width: 100%;
    height: 1rem;
    position: fixed;
    left: 0;
    background: #ffffff;
    box-shadow: 0 -1px 2px #d1d1d1;
    z-index: 99;
}
//JS:
$(document).ready(function(){
    var winH=$(window).height();
    var navH=$(".nav").height();
    $(".nav").css("top",winH-navH+'px');
});

今天测试提出问题:
页面在微信这类APP内打开都正常,但浏览器打开有问题,我测试时候发现UC浏览器没问题,但华为自带的浏览器不显示页面的导航,上拉页面后,浏览器自带的工具栏隐藏后,我写的导航展示出来了,但只要呼出浏览器工具栏,就又不见了,而且苹果浏览器也存在说不显示底下导航的问题。

图片说明


下面这张是收起浏览器工具栏的效果

图片说明
求大佬指点,感激不尽

  • 写回答

1条回答 默认 最新

  • Uncle丶怪叔叔 2019-08-21 11:18
    关注

    将总页面高度设置为100vh,或者设置window.innerHeight 试试?

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

    报告相同问题?

    悬赏问题

    • ¥15 Evil-droid生成的APK手机已经下载但无法建立任务
    • ¥25 c语言韩信点兵的变式
    • ¥15 怎么根据书上的例子完成这个问题呢?
    • ¥15 ECharts 增加Zoom,整行包括右边的Text一起滑动
    • ¥15 关于网上一个easyx制作的见缝插针小游戏(c++)
    • ¥15 开地址法双散列函数处理碰撞
    • ¥15 想问一下这个是什么情况 虚拟机Linux打不开了
    • ¥15 联通光猫掉注册了怎么重新注册上去
    • ¥15 关于unity开发steamvr程序遇到的问题
    • ¥60 求tc downloader的下载方式