问题

我有一个游戏网站，其中有一个页眉、一个棋盘和页脚。我需要将它们都适应视口。棋盘应该缩小以实现这一点。

缩小是我遇到问题的地方。我已经能够实现宽度响应，但高度方面有问题。

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

我正在按照以下方式进行操作，但棋盘最终会溢出父容器的高度。

在我的实际代码中，由于包装，页眉的高度是未知的。页脚包含不同数量的文本。在棋盘内部是一系列表示行的 div 元素和表示棋盘各个方格的子元素。这些方格上有一个 aspect-ratio。

.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>

任何帮助都将不胜感激。

.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>

答案1

得分: 2

The final answer depends on some clarifications on your part. I asked you in a comment to the question. But I will give a universal answer.

I will briefly explain what is done in the example below.
我将简要解释下面示例中的操作。
I created a .chessboard-wrapper that has a <canvas> in it.
我创建了一个.chessboard-wrapper，其中包含一个<canvas>。
<canvas> scales as you need and has aspect-ratio: 1;.
<canvas>会根据需要进行缩放，并且具有aspect-ratio: 1;。
The .chessboard itself has position: absolute; and will take the dimensions of the father.
.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>

<details>
<summary>英文:</summary>

The final answer depends on some clarifications on your part. I asked you in a comment to the question. But I will give a universal answer.

I will briefly explain what is done in the example below.  
I created a `.chessboard-wrapper` that has a `&lt;canvas&gt;` in it. `&lt;canvas&gt;` scales as you need and has `aspect-ratio: 1;`.  
The `.chessboard` itself has `position: absolute;` and will take the dimensions of the father.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    * {
      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 &gt; canvas {
      max-width: 100%;
      max-height: 100%;
    }

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

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

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;parent&quot;&gt;
      &lt;div class=&quot;header&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;child&quot;&gt;
        &lt;div class=&quot;chessboard-wrapper&quot;&gt;
          &lt;canvas width=&quot;1000000&quot; height=&quot;1000000&quot;&gt;&lt;/canvas&gt;
          &lt;div class=&quot;chessboard&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;footer&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



</details>



# 答案2
**得分**: 0

你在代码中使用了`aspect-ratio`，它指定了棋盘的高度与宽度相同，所以如果你的宽度是3000px，高度也将相同。你有以下选择：

1. 移除纵横比
2. 使用我的示例，移除子包装元素
3. 为棋盘设置最大高度

以下是代码部分，不包括翻译：

```html
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->
...
</style>

<!-- language: lang-html -->
...
</div>

<!-- end snippet -->

如果需要进一步翻译或解释，请告诉我。

*,
*::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>

答案3

得分: 0

以下是您要翻译的内容：

"I would just use a grid with the board in the middle.
I gave the "child" a different color just to show it was there. Notice how the board stays inside of that but the markup forces us to add an aspect ratio to it also.

EDIT: to let the padding to the heavy lifting here. A lot of credit to this idea here: https://css-tricks.com/aspect-ratios-grid-items/#aa-scenario-1-just-the-element-inside-needs-to-have-an-aspect-ratio"

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
}

.parent {
  background-color: grey;
}

.grid {
  display: grid;
  grid-template-columns: 5% 1fr 5%;
  /* calc middle row based on other two */
  grid-template-rows: 0.625em calc(100vh - 1.35em) 0.625em;
}

.grid>* {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  place-items: start;
}

.grid>[style^='--aspect-ratio']::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0;
  padding-bottom: calc(100% / (var(--aspect-ratio)));
}

.header,
.footer {
  grid-column: span 3;
}

.header {
  grid-row: 1;
  background-color: #0000FF;
}

.footer {
  grid-row: 3;
  background-color: #008000;
}

.child {
  grid-column: 2;
  grid-row: 2;
  background-color: #E6E6FA;
  display: grid;
  place-items: center;
  /* just to show the board stays inside it */
  padding-top: 0.25em;
}

.chessboard {
  aspect-ratio: 1 / 1;
  background-color: #800080;
  height: 100%
}

<div class="parent grid">
  <div class="header"></div>
  <div class="child" style="--aspect-ratio: 1/1;">
    <div class="chessboard"></div>
  </div>
  <div class="footer"></div>
</div>

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
}

.parent {
  background-color: grey;
}

.grid {
  display: grid;
  grid-template-columns: 5% 1fr 5%;
  /* calc middle row based on other two */
  grid-template-rows: 0.625em calc(100vh - 1.35em) 0.625em;
}

.grid>* {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  place-items: start;
}

.grid>[style^='--aspect-ratio']::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0;
  padding-bottom: calc(100% / (var(--aspect-ratio)));
}

.header,
.footer {
  grid-column: span 3;
}

.header {
  grid-row: 1;
  background-color: #0000FF;
}

.footer {
  grid-row: 3;
  background-color: #008000;
}

.child {
  grid-column: 2;
  grid-row: 2;
  background-color: #E6E6FA;
  display: grid;
  place-items: center;
  /* just to show the board stays inside it */
  padding-top: 0.25em;
}

.chessboard {
  aspect-ratio: 1 / 1;
  background-color: #800080;
  height: 100%
}

<div class="parent grid">
  <div class="header"></div>
  <div class="child" style="--aspect-ratio: 1/1;">
    <div class="chessboard"></div>
  </div>
  <div class="footer"></div>
</div>