Pourquoi la grille d'affichage avec 100 % dans les colonnes du modèle de grille dépasse-t-elle le corps ?

Pourquoi la grille d'affichage avec 100 % dans les colonnes de modèle de grille dépasse-t-elle le corps ?

Dans le code CSS fourni :

<code class="css">.parent {
  position: fixed;
  width: 100%;
  left: 0;
  top: 14px;
  display: grid;
  grid-template-columns: 40% 60%;
  grid-gap: 5px;
  background: #eee;
}</code>

Le problème ne vient pas de la propriété width: 100% mais du paramètre grid-template-columns. Lorsque vous spécifiez des pourcentages (40 % et 60 %) et un espacement de grille (5 px), la largeur totale dépasse 100 %. Cela amène le conteneur parent à s'étendre au-delà du bord droit du corps lorsqu'il est positionné de manière fixe.

Solution : Utilisation de l'unité fr

Pour résoudre ce problème, il est recommandé d'utiliser des unités fractionnaires (fr) au lieu de pourcentages pour la déclaration de grille-modèle-colonnes. Les unités fractionnaires allouent l'espace proportionnellement, en tenant compte des espaces définis :

<code class="css">.parent {
  ...
  grid-template-columns: 4fr 6fr;
  ...
}</code>

Exemple :

<code class="html"><div class='parent'>
  <div class='left'>LEFT</div>
  <div class='right'>RIGHT</div>
</div></code>

Avec cette modification, le conteneur parent sera désormais entièrement visible dans les limites du corps, même lorsque positionné fixe.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!