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

当你加载页面时,所有的浏览器都有一个顶部菜单(例如显示地址栏),当你开始滚动页面时,它会向上滑动。 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> <!-- this input highlight if resize event is fired --> <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>


当前回答

VH 100在移动设备上表现不佳,因为它没有考虑iOS栏(或其他平台上的类似功能)。

一个很好的解决方案是使用JavaScript的"window.innerHeight"。

简单地将元素的高度赋给这个值。 $ (' .element-name ') .height (window.innerHeight);

注意:在JS中创建一个函数可能很有用,这样当屏幕调整大小时,高度就可以改变。但是,我建议只在屏幕宽度改变时调用该函数,这样当用户向下滚动页面时iOS栏消失时,元素的高度就不会跳跃。

其他回答

关于这个问题及其可能的解决方案可以在这篇博客文章中找到:在100vh布局中寻址iOS地址栏

我最终在我的React应用程序中的解决方案是利用上面帖子中描述的React -div-100vh库。

我提出了一个React组件——如果你使用React,请查看它,如果你不使用React,请浏览源代码,这样你就可以使它适应你的环境。

它将全屏div的高度设置为window。innerHeight,然后在窗口调整大小时更新它。

当我在寻找一个解决方案的时候,这里是我的每个人使用VueJS与Vuetify(我的解决方案使用v-app-bar, v-navigation-drawer和v-footer): 我创建了App.scss(在App.vue中使用),内容如下:

.v-application { 身高:100 vh; 高度:-webkit-fill-available; } .v-application——包装{ Min-height: 100vh ! important: -webkit-fill-available; }

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

不要把vh和px混合

我刚刚发现我设计的一个web应用程序在iphone和ipad上有这个问题,并发现一篇文章建议使用针对特定苹果设备的媒体查询来解决这个问题。

我不知道是否可以在这里分享那篇文章中的代码,但是地址是:http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug

引用这篇文章:“使用针对旧版本iPhone和iPad分辨率的媒体查询,将元素高度与设备高度匹配。”

他们只添加了6个媒体查询来适应全高度元素,它应该可以工作,因为它是完全由CSS实现的。

编辑等待:我现在无法测试它,但我会回来报告我的结果。