javascript - 将 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>

上面的代码旨在将屏幕分成三组图 block :

• 第 3 组占据屏幕的整个右侧 - 其宽度是可配置的(目前设置为 50%)。它的内容可以忽略，因为它目前是 future 开发的占位符。
• 第 1 组占据屏幕左侧剩余部分的上半部分，包含 6 个 3x2 布局的方形图 block 。每个图 block 的宽度应相等。
• 第 2 组填充了第 1 组下方的最后剩余空间。它有 2 个垂直布局的图 block ，横跨整个可用宽度和高度，在它们之间均匀分布垂直空间。

所以代码似乎完成了我需要它做的所有事情，除了我需要第 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%，它会将包含的元素拉伸(stretch)为 1:1 的纵横比。 75% 的值会将其拉伸(stretch)为 4:3，依此类推。

设置宽高比后，第 1 点和第 2 点共同工作，以确保容器的实际内容将填满整个空间。

jsfiddle 答案归功于 JesseBuesking。