当工具栏隐藏在移动浏览器中时，使高度为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出现时，它锁定了身体而不是滚动。如果用户粗略地在fixed div上滚动，移动浏览器的底部工具栏也永远不会隐藏。之后当div隐藏然后身体状态再次恢复