Flex-box 100vh 在移动 safari chrome 后面延伸 - 是否有任何已知的技巧或解决方案 [英] Flex-box 100vh stretches behind mobile safari chrome - are there any known tricks or solutions

问题描述

我经常想要一个模态"类型的封面 div，或者一个用于简单的一键 UI 屏幕的全屏图像.我使用 flex-box 越多，我就越不能指望我的一些旧技术.当涉及到 100% 高度时，我通常会采用的方法是:

I often want to have a 'modal' type cover div, or a full-screen image for simple one button UI screens. The more I use flex-box, the less I can count on some of my old techniques. The hack I normally reach for when it comes to 100% height, is to:

html, body {
  height: 100%;
}

HTML 和 body 没有明确的高度......并且无法真正知道它们的高度.为了告诉任何孩子有多高"，他们需要知道他们父母的身高.对于深度嵌套的元素，这可能会变得非常混乱.

HTML and body don't have an explicit height... and can't really know what height they are. In order to tell any children how 'tall' to be, they need to know their parent's height. This can get pretty messy with deeply nested elements.

100vh 视口高度消除了这个嵌套问题，但在移动浏览器上，对于如何实现这一点似乎存在不同意见.在 iOS Safari 中，vh 将包括其位于底部的麻烦 UI 栏下方的区域.由于感知到的偏移，居中的元素不会出现居中，并且当您尝试滚动时，所有内容都会变得混乱、笨重并感觉破碎.

100vh view-port height takes this nesting issue out of the equation, but on mobile browsers there seems to be a difference in opinion as to how this should play out. In iOS Safari the vh would include its area beneath its meddlesome UI bar they place at the bottom. Centered elements do not appear centered because of the perceived offset and when you attempt to scroll things get all screwed up and clunky and feel broken.

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

I can use modernizr to check for touch, but this is a undesirable position to be in. In some cases I can add a class for html and body 100% including the view nested views, but when something like flickity injects many child elements, or there are nested views in an MVC that generate more nested elements, it's really unruly to tell everything to be 100% height / and touch isn't a consistent measure because there are touch desktops etc.

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

这感觉是我们应得的.他们拿走了我们在视口元标签上的最大值.我只是想做一些不会被破坏的东西.

This feels like something we deserve. They took away our max on the viewport meta-tag. I just want to make something that doesn't feel broken.

死的简单例子:http://s.codepen.io/sheriffderek/pen/LWevrx调试版本(在手机上测试):http://s.codepen.io/sheriffderek/debug/LWevrx

Dead simple example: http://s.codepen.io/sheriffderek/pen/LWevrx Debug version (to test on phone): http://s.codepen.io/sheriffderek/debug/LWevrx

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

More complex example with slider: http://codepen.io/sheriffderek/pen/BWJEKJ Debug version (to test on phone): http://s.codepen.io/sheriffderek/debug/BWJEKJ

制作东西 position: fixed; 似乎是获得完全覆盖而没有故障的唯一方法(直到最近这通常会导致重大故障)

Making things position: fixed; seems to be the only way to get full coverage without glitch (which usually caused major glitches until recently)

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

Fixed position version: http://codepen.io/sheriffderek/pen/XMVQOX Debug version (to test on phone): http://s.codepen.io/sheriffderek/debug/XMVQOX

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

Fixed position w slider / needed to get window height and add it to all childred - best solution I've been able to come up with: http://codepen.io/sheriffderek/pen/RpxOzM Debug version (to test on phone): http://s.codepen.io/sheriffderek/debug/RpxOzM

在这种情况下，100vh 难道不是我们可以使用的吗?我应该把它从我的工具箱里拿出来吗?或者 - 您是否有一套规则或技巧可以让我将其保留在我的生活中?

Is 100vh just not something that we can use in situations like this? Should I take it out of my toolbox? OR - do you have a set of rules or techniques that will allow me to keep it in my life?

推荐答案

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

According to this Post Chrome has the same behaviour since Version 56. https://developers.google.com/web/updates/2016/12/url-bar-resizing

改进了与 iOS 上的 Safari 的互操作性.新模型应该与 Safari 的行为方式相匹配，让 Web 开发人员的工作更轻松.将 vh 单元设为尽可能大的视口，而将 ICB 设为尽可能小，这种不直观的选择是为了匹配 Safari 的行为.

Improved interoperability with Safari on iOS. The new model should match how Safari behaves, making life easier for web developers. The unintuitive choice of making vh units the largest possible viewport but the ICB the smallest possible is to match Safari's behavior.

所以在这种情况下，100vh 对你(我)没有帮助.

So 100vh will not help you (me) in this Situation.

这篇关于Flex-box 100vh 在移动 safari chrome 后面延伸 - 是否有任何已知的技巧或解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！