设置一个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答案。