手机浏览器工具栏隐藏时高度100%

Question

我将 div 设置为 position:fixed，单击 <img> 后会向下滑动。当我的固定 div 出现时，它在全屏移动浏览器中全屏显示。但是，当我滚动时，移动浏览器工具栏隐藏，这导致我的固定 div 不再是全屏（底部有一个间隙，相当于隐藏工具栏的高度）。

工具栏图片：

我想将此固定 div 的高度设置为 100%，即使移动浏览器工具栏会自行隐藏。

CSS

#slider{
   display: none;
   position: fixed;
   z-index: 99999;
   top: 0;
   left: 0;
   height: 100%;
   background: #fff;
   overflow: scroll;
}

HTML

<body>
    <div id="tick" class="col-md-12">many things</div>
    <div id="slider" class="col-md-12">my slider</div>
</body>

Answer 1

我已经使用一些 css 解决了这个问题，它停止在移动浏览器上隐藏底部工具栏。

当fixed出现div时我加

$('body').css({'overflow':'hidden','position':'fixed'});

当隐藏（删除）这个 div 然后再次恢复 CSS

$('body').css({'overflow':'','position':''});

因此，当我的 fixed div 出现时，它已锁定 body，甚至无法滚动。如果用户在 fixed div 上粗略滚动，移动浏览器的底部工具栏也不会隐藏。之后 div 隐藏然后 body 状态再次恢复

make height 100% when toolbar hide in mobile browser