CSS3 100vh在移动浏览器中不稳定

我有一个很奇怪的问题…在每个浏览器和手机版本中，我都遇到了这种行为:

当你加载页面时，所有的浏览器都有一个顶部菜单(例如显示地址栏)，当你开始滚动页面时，它会向上滑动。 100vh有时只在视口的可见部分计算，所以当浏览器栏向上滑动时，100vh增加(以像素计算)。所有布局重新油漆和重新调整，因为尺寸已经改变对用户体验有不好的跳跃效果

如何避免这个问题?当我第一次听说viewport-height时，我很兴奋，我认为我可以使用它来固定高度块，而不是使用javascript，但现在我认为唯一的方法实际上是javascript与一些调整大小事件…

您可以在:示例站点看到问题

有人能帮助我/建议一个CSS解决方案吗?

简单测试代码:

/* maybe i can track the issue whe it occours... */ $(function(){ var resized = -1; $(window).resize(function(){ $('#currenth').val( $('.vhbox').eq(1).height() ); if (++resized) $('#currenth').css('background:#00c'); }) .resize(); }) *{ margin:0; padding:0; } /* this is the box which should keep constant the height... min-height to allow content to be taller than viewport if too much text */ .vhbox{ min-height:100vh; position:relative; } .vhbox .t{ display:table; position:relative; width:100%; height:100vh; } .vhbox .c{ height:100%; display:table-cell; vertical-align:middle; text-align:center; } <div class="vhbox" style="background-color:#c00"> <div class="t"><div class="c"> this div height should be 100% of viewport and keep this height when scrolling page <br>  <input type="text" id="currenth"> </div></div> </div> <div class="vhbox" style="background-color:#0c0"> <div class="t"><div class="c"> this div height should be 100% of viewport and keep this height when scrolling page </div></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

当前回答

找到这个答案的人正在与移动视图上向下/向上滚动的固定位置的元素的连接跳跃问题作斗争，根元素需要在底部而不是顶部指定属性，并且应该在px中给出一个字段值。这就解决了问题

改变: 元素{ 位置:固定; 上图:90年vh; 左:90 vh; 转换:翻译(-95%，-95%); ｝

元素{ 位置:固定; 底部:90 px;/*这是更改*/ 左:90 vh; 转换:翻译(-95%，-95%); }

2022-03-20 14:35:09

其他回答

我在下面创建了两个例子:

要展示如何高度:100vh的高度可以导致滚动在移动chrome浏览器:

代码:https://codesandbox.io/embed/mobile-viewport-100vh-issue-nxx8z?fontsize=14&hidenavigation=1&theme=dark

演示:https://nxx8z.csb.app/

解决方案使用位置:固定解决问题和纯CSS:

代码:https://codesandbox.io/s/mobile-viewport-100vh-issue-fix-forked-ypx5x?file=/index.html

演示:https://ypx5x.csb.app/

2022-01-28 06:23:26

Brave浏览器在iOS上的表现不同(有bug ?)它根据显示/隐藏地址栏动态改变视口高度。这有点烦人，因为它改变页面的布局取决于vw/vh单位。

Chrome和Safari都没问题。

2021-01-23 15:54:44

你可以试试min-height: -webkit-fill-available;而不是100vh。应该得到解决

2019-03-05 13:27:00

在我的例子中，我有一些元素设置为90vh，另一个元素设置为70px 将70px改为10vh解决了它

不要把vh和px混合

2021-10-05 18:22:52

不幸的是，这个问题至今仍然存在。最大的误导是不可能用浏览器的设备工具栏来表示情况。

我刚刚解决了这个问题(在PC、iOS和android浏览器上进行了测试):

.your_class {
   height: 100vh,
   max-height: 100%, // <-- add the line
   ...some other props,
}

我希望它能节省你的时间。

2022-06-07 11:13:11

CSS3 100vh在移动浏览器中不稳定

推荐文章

最新文章

标签