Flex-box 100vh延伸到移动safari chrome背后 - 是否有任何已知的技巧或解决方案

Question

Flex-box 100vh延伸到移动safari chrome背后 - 是否有任何已知的技巧或解决方案？ - 或者它真是太好了吗？

我经常想要一个＆＃39;模式＆＃39;键入封面div，或简单的单键UI屏幕的全屏图像。我使用的弹性盒越多，我的旧技术就越少。当达到100％高度时，我通常会遇到的黑客是：

html, body {
  height: 100%;
}

HTML和身体没有明确的高度......并且无法确切知道它们的高度。为了告诉任何孩子如何“高大”他们需要知道父母的身高。对于深层嵌套的元素，这可能会非常混乱。

100vh view-port height将此嵌套问题排除在等式之外，但在移动浏览器上，对于应该如何发挥作用的看法似乎存在差异。在iOS Safari中，vh会将其区域包含在它们放置在底部的meddlesome UI栏下方。中心元素由于感知到的偏移而不会出现居中，当您尝试滚动时，所有内容都会变得笨拙并且笨拙而感觉不安。

我可以使用modernizr来检查触摸，但这是一个不受欢迎的位置。在某些情况下，我可以为html和body 100％添加一个类，包括视图嵌套视图，但是当像flickity这样的东西注入许多孩子时元素，或MVC中有嵌套视图生成更多嵌套元素，告诉所有内容为100％高度/触摸并不是一致的措施，因为有触摸桌面等等。

.element-with-background-image {
  width: 100%;
  height: 100vh;
  background-image: url(...);
  background-size: cover;
  background-position: center center;
}

这感觉就像我们应得的东西。他们在视口元标记上删除了我们的最大值。我只是想制作一些不会感觉破碎的东西。

死的简单示例：http://s.codepen.io/sheriffderek/pen/LWevrx 调试版本（在手机上测试）：http://s.codepen.io/sheriffderek/debug/LWevrx

带滑块的更复杂示例：http://codepen.io/sheriffderek/pen/BWJEKJ 调试版本（在手机上测试）：http://s.codepen.io/sheriffderek/debug/BWJEKJ

制作position: fixed;似乎是获得全面覆盖而没有故障的唯一方法（这通常会导致直到最近出现重大故障）

固定位置版本：http://codepen.io/sheriffderek/pen/XMVQOX 调试版本（在手机上测试）：http://s.codepen.io/sheriffderek/debug/XMVQOX

固定位置w滑块/需要获得窗口高度并将其添加到所有childred - 我能够提出的最佳解决方案： http://codepen.io/sheriffderek/pen/RpxOzM 调试版本（在手机上测试）：http://s.codepen.io/sheriffderek/debug/RpxOzM

摘要

100vh不是我们可以在这种情况下使用的东西吗？我应该把它拿出我的工具箱吗？或者 - 你有一套规则或技术可以让我把它留在我的生活中吗？

Answer 1

根据此帖子，Chrome自版本56以来具有相同的行为。 https://developers.google.com/web/updates/2016/12/url-bar-resizing

  

改进了iOS上与Safari的互操作性。新模型应该与Safari的行为相匹配，让Web开发人员的工作更轻松。将vh单位作为最大可能视口的不直观选择，但ICB尽可能小，以匹配Safari的行为。

所以100vh在这种情况下对你（我）没有帮助。