css - 如何获得与大众高度相同但百分比相同的结果？

Question

我试图让高度取决于浏览器的宽度。目前我正在使用新的视口(viewport)宽度单位使其在所有屏幕上保持一致。我更喜欢百分比，因为它有更大的浏览器支持。有什么方法可以使它与百分比一起工作吗？

例如，如果我使用 height: 30% 并更改浏览器的高度，高度也会发生变化，老实说我不希望这样。我只是想让它在宽度改变时改变。我知道填充，但这真的是解决问题的好方法吗？浏览器之间似乎不一致。

我想听听你们的一些反馈。

Answer 1

填充确实是做到这一点的最佳方式——而且浏览器支持完全一致(与视口(viewport)宽度单位不同)。

.wrapper {
  height: 0;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
}

.container {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

使用以下标记:

<div class="wrapper">
  <div class="container">
  </div>
</div>

这将生成一个方形容器，其高度与可用宽度匹配。