設置一個div的高度等於計算寬度

Question

這是我的代碼（解釋後）：https://jsfiddle.net/L7a35dda/1/

body { 
 
    width: 1920px; 
 
    height: 1080px; 
 
    background-color: rgb(48, 48, 48); 
 
    margin: 0; 
 
    padding: 0; 
 
    
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    align-items: flex-start; 
 
    align-content: flex-start; 
 
} 
 

 
/* Overall Styles */ 
 
.group-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.group-header { 
 
    height: 40px; 
 
    background-color: rgb(21, 101, 192); 
 
} 
 

 
.group-body { 
 
    flex-grow: 1; 
 

 
    display: flex; 
 
} 
 

 
.tile { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.tile-header { 
 
    background-color: rgb(25, 118, 210); 
 
} 
 

 
.tile-body { 
 
    flex-grow: 1; 
 
} 
 

 
/* Group 1 */ 
 
#group-1 { 
 
    width: 50%; 
 
    order: 1; 
 
    border-right: 3px solid black; 
 
    border-bottom: 3px solid black; 
 
} 
 

 
#group-1 .group-body { 
 
    flex-wrap: wrap; 
 
    align-items: flex-start; 
 
    align-content: flex-start; 
 
} 
 

 
#group-1 .tile { 
 
    width: calc(100%/3); 
 
    height: 300px; /* Placeholder: Actual value needs to be equal to width */ 
 
} 
 

 
/* Group 2 */ 
 
#group-2 { 
 
    width: 50%; 
 
    order: 2; 
 
    flex-grow: 1; 
 
    border-right: 3px solid black; 
 
    border-top: 3px solid black; 
 
} 
 

 
#group-2 .group-body { 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
} 
 

 
#group-2 .tile { 
 
    flex-grow: 1; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
/* Group 3 */ 
 
#group-3 { 
 
    width: 50%; 
 
    height: 100%; 
 
    order: 3; 
 
    border-left: 3px solid black; 
 
} 
 

 
#group-3 .group-body { 
 
    flex-direction: column; 
 
} 
 

 
#group-3 .tile { 
 
    flex-grow: 1; 
 
    
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="group-1" class="group-container"> 
 
    <div class="group-header">Group 1</div> 
 
    <div class="group-body"> 
 
    <div class="tile"> 
 
     <div class="tile-header">Tile 1A</div> 
 
     <iframe class="tile-body"></iframe> 
 
    </div> 
 
    <div class="tile"> 
 
     <div class="tile-header">Tile 1B</div> 
 
     <iframe class="tile-body"></iframe> 
 
    </div> 
 
    <div class="tile"> 
 
     <div class="tile-header">Tile 1C</div> 
 
     <iframe class="tile-body"></iframe> 
 
    </div> 
 
    <div class="tile"> 
 
     <div class="tile-header">Tile 1D</div> 
 
     <iframe class="tile-body"></iframe> 
 
    </div> 
 
    <div class="tile"> 
 
     <div class="tile-header">Tile 1E</div> 
 
     <iframe class="tile-body"></iframe> 
 
    </div> 
 
    <div class="tile"> 
 
     <div class="tile-header">Tile 1F</div> 
 
     <iframe class="tile-body"></iframe> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="group-2" class="group-container"> 
 
    <div class="group-header">Group 2</div> 
 
    <div class="group-body"> 
 
    <div class="tile"> 
 
     <div class="tile-header">Tile 2A</div> 
 
     <iframe class="tile-body"></iframe> 
 
    </div> 
 
    <div class="tile"> 
 
     <div class="tile-header">Tile 2B</div> 
 
     <iframe class="tile-body"></iframe> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="group-3" class="group-container"> 
 
    <div class="group-header">Group 3</div> 
 
    <div class="group-body"> 
 
    <div class="tile"> 
 
     <div class="tile-header">Tile 3A</div> 
 
     <iframe class="tile-body"></iframe> 
 
    </div> 
 
    </div> 
 
</div>

上面的代碼的目的是將屏幕分爲三組磚：

• 組3佔據屏幕的整個右側 - 其寬度可配置（目前設置爲50％）。它的內容可以忽略不計，因爲它目前是未來發展的佔位符。
• 組1佔據了屏幕左側的剩餘部分的上部，其中包含6個方形的3x2佈局的瓷磚。每個瓷磚的寬度應該相等。
• 組2填滿組1下的最後剩餘空間。它在垂直佈局中具有2個瓦片，跨越整個可用寬度和高度，在它們之間均勻分佈垂直空間。

所以代碼似乎做了我需要它做的一切，除了我需要組1瓷磚爲正方形的部分。我目前正在將它作爲這個問題的佔位符進行硬編碼 - 這在實際產品中是無法完成的，因爲它將通過網絡部署到多臺計算機上，呈現在不同屏幕分辨率的不同介質上。

我應該如何更改我的代碼以實現此目的？

編輯：將問題標題從iframe更改爲div，因爲問題最初是針對該問題的，儘管最終發佈的問題是針對tile div。

Answer 1

貸ovokuro用於連接我含answer問題適合我的目的，但因爲該解決方案是在這個問題的意見，我會在這裏重新發布它作爲一個正確的答案：http://jsfiddle.net/B8FU8/6245/

.outer { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
} 
 

 
#container { 
 
    position: relative; 
 
    flex-basis: 20%; 
 
    outline: 1px solid #eee; 
 
    text-align: center; 
 
} 
 

 
#dummy { 
 
    margin-top: 100%; 
 
} 
 

 
#element { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: silver; 
 
}

<div class="outer"> 
 
    <div id="container"> 
 
     <div id="dummy"></div> 
 
     <div id="element"> 
 
      some text 
 
     </div> 
 
    </div> 
 
    <div id="container"> 
 
     <div id="dummy"></div> 
 
     <div id="element"> 
 
      some text2 
 
     </div> 
 
    </div> 
 
    <div id="container"> 
 
     <div id="dummy"></div> 
 
     <div id="element"> 
 
      some text3 
 
     </div> 
 
    </div> 
 
    <div id="container"> 
 
     <div id="dummy"></div> 
 
     <div id="element"> 
 
      some text4 
 
     </div> 
 
    </div> 
 
    <div id="container"> 
 
     <div id="dummy"></div> 
 
     <div id="element"> 
 
      some text5 
 
     </div> 
 
    </div> 
 
    <div id="container"> 
 
     <div id="dummy"></div> 
 
     <div id="element"> 
 
      some text6 
 
     </div> 
 
    </div> 
 
    <div id="container"> 
 
     <div id="dummy"></div> 
 
     <div id="element"> 
 
      some text7 
 
     </div> 
 
    </div> 
 
    <div id="container"> 
 
     <div id="dummy"></div> 
 
     <div id="element"> 
 
      some text8 
 
     </div> 
 
    </div> 
 
    <div id="container"> 
 
     <div id="dummy"></div> 
 
     <div id="element"> 
 
      some text9 
 
     </div> 
 
    </div> 
 
</div>

用的jsfiddle答案，我發現身邊擺弄之後，我發現，在#container的display屬性是多餘的解決方案，所以我從我的代碼片段中刪除它們。

構成該溶液的特定部件是：

1. #container - position: relative，當然，寬度值
2. #element - 除了background-color中指定的所有屬性。
3. #dummy - margin-top

根據上面鏈接答案提供的解釋，點3將寬高比：當邊緣被指定爲百分比值，它被計算爲包含元素的寬度的百分比。因此，如果該值爲100％，則將包含的元素拉伸到1：1的寬高比。 75％的值將它拉伸到4：3，等等。

設置縱橫比後，點1和點2共同工作，以確保容器的實際內容將填滿整個空間。

積分給JesseBuesking jsfiddle答案。