时间戳

首页 > 解决方案 > 在移动浏览器中隐藏工具栏时使高度为 100%

html - 在移动浏览器中隐藏工具栏时使高度为 100%

问题描述

我有一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>

标签： htmlcssmobile-browser

解决方案

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

当fixeddiv 出现时，我添加

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

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

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

所以当我的fixeddiv 出现时，它锁定了身体，甚至没有滚动。fixed如果用户在div上粗略滚动，移动浏览器的底部工具栏也永远不会隐藏。之后当 div hide 然后身体状态再次恢复

推荐阅读