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. Die Minimierung ist das Problem, das ich habe. Es ist mir gelungen, die Breite anzupassen, aber nicht die einschränkende Höhe. Das Brett sollte quadratisch bleiben und ungenutzten Platz einnehmen oder schrumpfen, um ein Überlaufen zu verhindern. Ich mache etwas in der Art von unten, aber das Brett läuft über die Höhe des Elternteils hinaus. In meinem tatsächlichen Code ist die Höhe des Headers aufgrund des Zeilenumbruchs unbekannt. Fußzeilen enthalten unterschiedliche Textmengen. Innerhalb des Schachbretts gibt es eine Reihe von Divs, die Zeilen darstellen, und eine Reihe von Divs, die jedes einzelne Schachbrett darstellen

P粉458913655 · Answer

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

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

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

P粉034571623 · Answer

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

我将简要解释下面示例中所做的事情。
我创建了一个 .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;
}