将响应式方块放置在弹性列中

Question

我有一个游戏网站，其中有页眉、棋盘和页脚。我需要将所有三个都安装在视口内。棋盘应该缩小才能实现这一点。

缩小是我遇到的问题。我已经能够获得宽度响应，但无法获得限制性高度。

棋盘应保持正方形并占据未使用的空间或缩小以防止溢出。

我正在按照以下方式做一些事情，但是棋盘最终会溢出父级的高度。

在我的实际代码中，由于换行，标题的高度是未知的。页脚有不同数量的文本。棋盘内部有一系列代表行的 div 和一系列代表棋盘各个方格的子元素。正方形有长宽比

.parent {
  height: 100vh;
  background-color: grey;
  display: flex;
  flex-direction: column;
}

.header {
  height: 10px;
  background-color: blue;
}

.child {
  background-color: red;
  flex: 1 1 auto;
}

.chessboard {
  width: 100%;
  max-height: 100%;
  aspect-ratio: 1/1;
  background-color: purple;
  margin: auto;
}

.footer {
  height: 10px;
  background-color: green;
}

<div class="parent">
  <div class="header">
  </div>
  <div class="child">
    <div class="chessboard">
    </div>
  </div>
  <div class="footer">
  </div>
</div>

感谢任何帮助。

Answer 1

你有aspect-ratio告诉棋盘具有与宽度相同的高度，所以如果你的宽度是3000px，你的高度将是相同的。你有选择

1. 删除纵横比
2. 在我的示例中，删除子包装元素
3. 设置棋盘的最大高度

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent {
  height: 100vh;
  background-color: grey;
  display: flex;
  flex-direction: column;
}

.header {
  flex-shrink: 0;
  height: 10px;
  background-color: blue;
}

.child {
  flex-grow: 1;
  background-color: lightcoral;
}

.chessboard {
  height: 100%;
  max-height: 100%;
  background-color: purple;
  margin: auto;
}

.footer {
  flex-shrink: 0;
  height: 10px;
  background-color: green;
}

<div class="parent">
  <header class="header">
  </header>

  <div class="child">
    <div class="chessboard">
      main
    </div>
  </div>

  <footer class="footer">
  </footer>
</div>

Answer 2

最终答案取决于您的一些澄清。我在对这个问题的评论中问过你。但我会给出一个通用的答案。

我将简要解释下面示例中所做的事情。
我创建了一个 .chessboard-wrapper ，其中有一个 。 根据需要进行缩放，并具有 aspect-ratio: 1;。
.chessboard 本身具有 position:absolute; 并将采用父亲的尺寸。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent {
  height: 100vh;
  background-color: grey;
  display: flex;
  flex-direction: column;
}

.header {
  height: 10px;
  background-color: blue;
  flex: none;
}

.child {
  background-color: red;
  flex: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chessboard-wrapper {
  position: relative;
  min-height: 0;
  margin: auto;
  aspect-ratio: 1;
}

.chessboard-wrapper > canvas {
  max-width: 100%;
  max-height: 100%;
}

.chessboard {
  position: absolute;
  inset: 0;
  background-color: purple;
}

.footer {
  height: 10px;
  background-color: green;
  flex: none;
}

<div class="parent">
  <div class="header"></div>
  <div class="child">
    <div class="chessboard-wrapper">
      <canvas width="1000000" height="1000000"></canvas>
      <div class="chessboard"></div>
    </div>
  </div>
  <div class="footer"></div>
</div>