我有一個游戲網站，里面有頁眉、棋盤和頁腳。我需要把這三個都放在視窗里。棋盤應該縮小才能實現這一點。

縮水是我有問題的地方。我已經能夠得到寬度響應，但不是限制性的高度。

棋盤應保持正方形，并占據未使用的空間或縮小以防止溢出。

我按照下面的思路做了一些事情，但是棋盤最終超出了父級的高度。

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

# # #最終答案取決于你的一些澄清。我在問題的評論里問過你。但我會給出一個普適的答案。

我將在下面的例子中簡單解釋一下是怎么做的。 我創建了一個.棋盤包裝器，它有一個& lt畫布& gt在里面。& lt畫布& gt根據您的需要進行縮放，長寬比為1；。 的。棋盤本身就有位置:絕對；并將采用父的維度。

* {
  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>

# # #你的長寬比表示棋盤的高度和寬度相同，所以如果你的寬度是3000像素，那么你的高度也是相同的。你有選擇

移除縱橫比 在我的例子中，移除子包裝元素 設置棋盤的最大高度

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

# # #我會用一個格子把板子放在中間。 我給了& quot孩子& quot不同的顏色只是為了顯示它在那里。注意板子是如何留在里面的，但是標記迫使我們也給它增加一個長寬比。

編輯:讓填充物在這里舉重若輕。這個想法很大程度上歸功于:https://css-tricks.com/aspect-ratios-grid-items/# aa-scenario-1-just-the-element in-need-to-have a-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>