如何獲得與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> 

這將產生一個方形容器，其高度可用的寬度相匹配。