如何获得与vw中的高度相同的结果但百分比？

Question

我想让高度取决于浏览器的宽度。目前，我正在使用新的视口宽度单位使其在所有屏幕上保持一致。我更喜欢百分比，虽然它有更大的浏览器支持。有没有办法以百分比来完成这项工作？

例如，如果我使用高度：30％并更改浏览器的高度，高度也会发生变化，这实际上并不是我想要的。我只是希望它在宽度改变时改变。我知道填充，但它是否是一种解决问题的好方法？似乎浏览器之间不一致。

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

Answer 1

填充确实是做到这一点的最佳方式 - 并且浏览器支持完全一致（与视口宽度单位不同）。

.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> 

这将产生一个方形容器，其高度可用的宽度相匹配。