相对填充和vh单位 - 是bug还是规范误解？

Question

演示

有时我会创建一个正方形（或任何矩形），使用类似于这种方法的方法使其在任何大小下都保持其比例。

我的目标：

• 防止正方形在高度较小的设备上超出视口，例如横向移动的手机

提议的解决方案：

• 使用max-width: 90vh将正方形的宽度限制为视口高度的百分比
• 期望比例得到尊重

CSS

    .square {
      position: relative;
      height: 0;
      padding-bottom: 100%;
      overflow: hidden;
    }

    .square-inner {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .mw { max-width: 90vh;} /* solution, but makes things break */

HTML

    <div class="square mw">
        <div class="square-inner"></div>
    </div>

应该发生什么：

• 在高度较小的视口中，正方形的最大宽度应为视口高度的90％

实际发生的情况：

• 当视口高度小于正方形的宽度时：
  • 宽度受vh值限制
  • 高度从正方形的宽度计算而来，如果没有被限制为vh
  • 我们得到一个纵向长方形

规范指出，相对值是从“包含块”计算的，这似乎应该是容器的当前宽度。

浏览器行为：

• Chrome 29.0.1547.65：如描述
• Firefox 23.01：如描述
• Opera：完全不尊重vh未经验证的Opera 16+

我是否错误地解释了规范，还是浏览器供应商实现的可能存在错误？

- Larry

---

请在问题中发布实际的代码（最好是SSCCEE）。问题不应该依赖外部资源才能被阅读和回答。 - Joachim Sauer

Answer 1

问题在于同时使用百分比和vh长度单位。

尝试这个： 工作示例

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: sans-serif;
  font-weight: 100;
}

.neat {
  width: 50%;
  max-width: 600px;
  min-width: 320px;
  margin: 0 auto;
}

.col {
  float: left;
  padding: 2rem;
  width: 90vh;    /*** Important bit changed width:50%; to width:90vh; ***/
  max-width: 50%; /*** Important bit added max-width:50%; ***/
}

.square {
  position: relative;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}

.square-inner {
  position: absolute;
  background-color: #333333;
  color: white;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
}

.mw {
  max-width: 90vh;
}

- apaul

---

这个按预期工作 - 但重绘问题太普遍了，以至于我无法在生产中实际使用它。不错的解决方案。我已经测试过将容器放在正方形外面，以便列不被修改（因为它是网格的一部分），并且容器对宽度施加约束 - 按预期工作，除了一些小问题。 - Larry

Answer 2

我认为Opera不支持vh，并且已知存在问题。我想知道这个bug是否影响了你所看到的内容：http://code.google.com/p/chromium/issues/detail?id=124331。

- cage rattler

---

哈哈，我现在看到caniuse.com正在显示Opera 16的值了 - 我之前没注意到：http://caniuse.com/#search=vh。vh似乎有相当多的怪癖 - 我的演示在容器折叠时加载，但调整大小事件似乎会触发正确的绘制。重新绘制，就像你的链接一样，似乎可以解决一些问题。 - Larry