CSS 方形受父高度约束

Question

我的页面布局由以下内容组成：

• 固定高度标题：HEADER
• 固定高度页脚：FOOTER
• 弹性增长内容以填充可用的剩余高度：内容

我希望 flex 增长内容能够容纳一个方形 div，其尺寸等于CONTENT 元素的高度。

我无法实现此约束，因为对正方形使用 width = 100vh 并不能计算内容高度的 100%！

您可以在这里查看我到目前为止所拥有的内容：http ://jsfiddle.net/tgs93kLr/

<div class="body">
    <div class="header">header</div>
    <div class="content">
        <div class="square"></div>
    </div>
    <div class="footer">footer</div>
</div>

和

.body {
  height: 250px;
  display: flex;
  flex-flow: column;
  background: red;
}
.header {
  height: 100px;
  background: blue;
}
.footer {
  height: 100px;
  background: green;
}
.content {
  flex-grow: 1;
  background: yellow;
}
.square {
  background: black;
  width: 100vh;
  height: 100vh;
}

您对如何实现此目标有任何想法吗？注意：对于内容宽度<高度的情况，我已经有了一个解决方案

Answer 1

您可以使用calc并将高度和宽度设置为100vh - (header height + footer height)

.body {
  display: flex;
  flex-flow: column;
  background: red;
}
.header {
  height: 100px;
  background: blue;
}
.footer {
  height: 100px;
  background: green;
}
.content {
  flex-grow: 1;
  background: yellow;
}
.square {
  background: black;
  width: calc(100vh - 200px);
  height: calc(100vh - 200px);
}

<div class="body">
  <div class="header">header</div>
  <div class="content">
    <div class="square"></div>
  </div>
  <div class="footer">footer</div>
</div>