Pourquoi ma disposition de grille à positionnement fixe dépasse-t-elle la largeur du corps ?

Disposition de grille à position fixe dépassant la largeur du corps

Lors de l'utilisation d'une grille CSS avec une position fixe, vous pouvez rencontrer un problème où les éléments de la grille s'étendent au-delà du corps de la page, en particulier lors de la définition de la propriété grid-template-columns à 100 %. Pour comprendre pourquoi cela se produit, décomposons le problème et proposons une solution.

Dans le code CSS fourni :

.parent {
  position: fixed;
  width: 100%;
  display: grid;
  grid-template-columns: 40% 60%;
}

Vous avez spécifié une largeur fixe de 100 % pour le conteneur parent. , ce qui signifie qu'il occupera toute la largeur de la zone visible. La propriété grid-template-columns définit la largeur des colonnes de la grille à 40 % et 60 % respectivement.

Cependant, le problème clé réside dans le positionnement. Lorsque vous définissez position:fixed sur le conteneur parent, il se détache du flux de documents normal et est placé à ses coordonnées spécifiées (dans ce cas, dans le coin supérieur gauche de la page). Le navigateur réserve de l'espace pour l'élément fixe, même si son contenu dépasse la zone visible.

Ce comportement n'est pas lié à la propriété width: 100%. Même si vous supprimez cette ligne, le problème persisterait. Le coupable est la propriété grid-template-columns.

La propriété grid-template-columns divise l'espace disponible en deux colonnes, mais vous avez également spécifié un espace de grille de 5 px entre les colonnes, ce qui s'ajoute à la largeur totale de la grille. Dans votre cas, 40 % 60 % 5px = 105px. Ces 5 pixels supplémentaires poussent le bord de la colonne de droite en dehors de la zone visible, la faisant apparaître en dehors du corps.

Solution :

Pour résoudre ce problème, vous devez calculer les pourcentages corrects pour les colonnes de la grille, en tenant compte de l'écart de la grille. Au lieu d'utiliser des pourcentages absolus, vous pouvez utiliser l'unité fr, qui représente une fraction de l'espace disponible.

.parent {
  position: fixed;
  width: 100%;
  display: grid;
  grid-template-columns: 4fr 6fr;
}

Dans ce code révisé, les valeurs 4fr et 6fr représentent 4 et 6 parties de l'espace disponible , respectivement. Le navigateur calculera les largeurs réelles des colonnes en fonction de ces proportions, en s'assurant qu'elles tiennent dans le conteneur parent, y compris l'espacement de la grille de 5 px.

En utilisant l'unité fr, vous pouvez créer une disposition de grille réactive. qui s'adapte à différentes tailles d'écran et garantit que les éléments de la grille restent dans le corps de la page.

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!