將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組占據屏幕左側剩余部分的上部，其中包含3x2布局的6個正方形瓷磚。 每個圖塊的寬度應相等。
• 第2組填充了第1組下面的最后一個剩余空間。它具有2個垂直布局的圖塊，橫跨整個可用寬度和高度，並在它們之間均勻分布垂直空間。

因此，該代碼似乎可以完成我需要做的所有事情，但我需要將Group 1拼貼設為方形的部分除外。 我目前正在將其硬編碼為該問題的占位符-在實際產品中無法做到，因為它將被部署到網絡上的多台計算機上，並呈現到不同屏幕分辨率的不同媒體上。

我應該如何更改代碼以實現這一目標？

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

Answer 1

感謝ovokuro將我鏈接到包含適合我目的的答案的問題 ，但是由於解決方案在該問題的注釋中，因此我將在此處重新發布它作為適當的答案： 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共同起作用，以確保容器的實際內容將充滿整個空間。

感謝jsfiddle答案的JesseBuesking。