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

Posted 2023-02-24

技术标签:

【中文标题】在移动浏览器中隐藏工具栏时使高度为 100%【英文标题】：make height 100% when toolbar hide in mobile browser 【发布时间】：2019-03-18 06:53:22 【问题描述】：

我将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>

【问题讨论】：

请同时添加 html。谢谢 @XenioGracias 演示 HTML 添加在某处分享实时代码。是否可以通过添加 sn-p 或其他方式来创建场景？当我在 fixed 模态框（如 div（移动浏览器））上滚动时，背景会显示在区域下方（在自动隐藏工具栏后） 【参考方案1】：

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

当fixed div 出现时我添加

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

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

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

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

【讨论】：

以上是关于在移动浏览器中隐藏工具栏时使高度为 100%的主要内容，如果未能解决你的问题，请参考以下文章