Safari 中的 CSS vw 和高度 100%答案

【问题标题】：CSS vw and height 100% in SafariSafari 中的 CSS vw 和高度 100%
【发布时间】：2014-03-18 07:57:10
【问题描述】：

想出一个好的题目真的很难，因为不是几句话就能解释清楚的。

高度为 100% 且父级在vw（视口宽度）中具有固定高度的元素在 Safari 上实际上并不是 100% 高（Mac Mavericks，不确定 Windows）。是 0。

我准备了pen with example 来证明我的问题。使用 Chrome，内部元素的正确高度为 100%。对于 Safari (v7.0.2 (9537.74.9))，内部元素的高度为 0。

编辑：同样的错误发生在 iOS 7.1 的 iPhone 上

【问题讨论】：

哪个版本的 Safari？
版本 7.0.2 (9537.74.9)
目前无法测试 7.x，但您尝试过使用最小高度吗？它仍然适用于零吗？并且 iOS Mobile Safari 不能正确支持 vw/vh：caniuse.com/#feat=viewport-units
很遗憾，我目前无法访问 Safari。我已经读过，如果父元素的高度以 vh 单位设置，则基于 WebKit/Blink 的浏览器不会将百分比高度应用于嵌套元素。一种解决方法（来自同一来源）是将 position:relative 放在外部 div 上，将 position:absolute 放在内部。
相对父级和绝对子级确实解决了这个问题！请将其发布为答案，我会接受。 @zvona 问题在于vmax，而不是vw

【解决方案1】：

这是 Safari 7 中 vh 和 vw 的一个已知错误。您可以通过在 #child 元素上设置 height: inherit 来修复它：

#parent {
  width:100%;
  height:50vw;
  background: red;
}

#child {
  width: 100%;
  height: inherit;
  background: lime;
}

在 Safari 8 中，此错误已得到修复，百分比高度/宽度应该可以正常工作。

【讨论】：