Platzieren Sie reaktionsfähige Blöcke in flexiblen Spalten

Question

Ich habe eine Gaming-Website mit einer Kopfzeile, einem Board und einer Fußzeile. Ich brauche alle drei, damit sie in das Ansichtsfenster passen. Um dies zu erreichen, sollte die Platine kleiner sein.

Minifizierung ist das Problem, das ich habe. Es ist mir gelungen, die Breite anzupassen, aber nicht die einschränkende Höhe.

Die Platine sollte quadratisch bleiben und ungenutzten Platz einnehmen oder schrumpfen, um ein Überlaufen zu verhindern.

Ich mache etwas in der Art wie unten, aber am Ende ragt das Brett über die Größe des Elternteils hinaus.

In meinem tatsächlichen Code ist die Höhe des Titels aufgrund des Zeilenumbruchs unbekannt. Fußzeilen enthalten unterschiedliche Textmengen. Innerhalb des Schachbretts gibt es eine Reihe von Divs, die die Reihen darstellen, und eine Reihe von untergeordneten Elementen, die die Felder des Schachbretts darstellen. Ein Quadrat hat ein Seitenverhältnis

.parent {
  Höhe: 100 Vh;
  Hintergrundfarbe: grau;
  Anzeige: Flex;
  Flexrichtung: Spalte;
}

.Header {
  Höhe: 10px;
  Hintergrundfarbe: blau;
}

.Kind {
  Hintergrundfarbe: rot;
  Flex: 1 1 Auto;
}

.Schachbrett {
  Breite: 100 %;
  maximale Höhe: 100 %;
  Seitenverhältnis: 1/1;
  Hintergrundfarbe: lila;
  Rand: automatisch;
}

.Fusszeile {
  Höhe: 10px;
  Hintergrundfarbe: grün;
}

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

Danke für jede Hilfe.

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>