<p>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. </p> <p>Minifizierung ist das Problem, das ich habe. Es ist mir gelungen, die Breite anzupassen, aber nicht die einschränkende Höhe. </p> <p>Die Platine sollte quadratisch bleiben und ungenutzten Platz einnehmen oder schrumpfen, um ein Überlaufen zu verhindern. </p> <p>Ich mache etwas in der Art wie unten, aber am Ende ragt das Brett über die Größe des Elternteils hinaus. </p> <p>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</p> <p> <pre class="brush:css;toolbar:false;">.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; }</pre> <pre class="brush:html;toolbar:false;"><div class="parent"> <div class="header"> </div> <div class="child"> <div class="Schachbrett"> </div> </div> <div class="footer"> </div> </div></pre> </p> <p>Danke für jede Hilfe. </p>

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

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