Placez des blocs réactifs dans des colonnes flexibles

Question

J'ai un site Web de jeux doté d'un en-tête, d'un tableau et d'un pied de page. J'ai besoin que les trois s'inscrivent dans la fenêtre. Le conseil d'administration devrait être plus petit pour y parvenir.

La minification est le problème que je rencontre. J'ai réussi à rendre la largeur réactive mais pas la hauteur restrictive.

Le tableau doit rester carré et occuper un espace inutilisé ou rétrécir pour éviter tout débordement.

Je fais quelque chose du genre ci-dessous, mais la planche finit par déborder de la hauteur du parent.

Dans mon code actuel, la hauteur du titre est inconnue en raison du retour à la ligne. Les pieds de page contiennent différentes quantités de texte. À l’intérieur de l’échiquier se trouvent une série de divs qui représentent les lignes et une série d’éléments enfants qui représentent les cases de l’échiquier. Un carré a un rapport hauteur/largeur

.parent {
  hauteur : 100vh ;
  couleur de fond : gris ;
  affichage : flexible ;
  direction flexible : colonne ;
}

.entête {
  hauteur : 10px ;
  couleur de fond : bleu ;
}

.enfant {
  couleur de fond : rouge ;
  flex : 1 1 auto ;
}

.échiquier {
  largeur : 100 % ;
  hauteur maximale : 100 % ;
  rapport hauteur/largeur : 1/1 ;
  couleur de fond : violet ;
  marge : auto ;
}

.bas de page {
  hauteur : 10px ;
  couleur de fond : vert ;
}</pré>
<pre class="brush:html;toolbar:false;"><div class="parent">
  <div class="en-tête">
  </div>
  <div class="enfant">
    <div class="échiquier">
    </div>
  </div>
  <div class="pied de page">
  </div>
</div>

Merci pour toute aide.

Answer 1

Vous devez aspect-ratio dire au tableau d'avoir la même hauteur que la largeur, donc si votre largeur est de 3000px, votre hauteur sera la même. Vous avez le choix

1. Supprimer les proportions
2. Dans mon exemple, supprimez l'élément wrapper enfant
3. Définissez la hauteur maximale de l'échiquier

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

La réponse finale dépend de quelques éclaircissements de votre part. Je vous ai posé la question en commentaire sur cette question. Mais je vais donner une réponse générale.

Je vais expliquer brièvement ce qui est fait dans l'exemple ci-dessous.
J'ai créé un .chessboard-wrapper ，其中有一个 。 根据需要进行缩放，并具有 aspect-ratio: 1;.
.chessboard 本身具有 position:absolute; Et viendra dans les tailles de papa.

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