Pourquoi une grille avec 100 % de colonnes de modèle de grille s'étend-elle au-delà du corps lors de l'utilisation d'un positionnement fixe ?

La grille dépasse le corps avec 100 % de colonnes de modèle de grille

Pourquoi une grille d'affichage avec 100 % de colonnes de modèle de grille s'étend-elle au-delà du corps lorsque la position est définie sur fixe ?

Problème :

Considérez le CSS et le HTML suivants :

< ;pre class="snippet-code-css lang-css Prettyprint-override">.parent {
position:fixed;
width:100%;
left:0;
top:14px ;
display:grid;
grid-template-columns:40% 60%;
grid-gap:5px;
background:#eee;
}
.left {
border:2px rouge uni;
}
.right {
border:2px rouge uni;
}

<div class='parent'><br> <div class='left'>LEFT</div><br> <div class='right'> DROITE</div><br></div>

Lorsque la position n'est pas fixe, la grille s'affiche correctement. Cependant, lorsque la position est définie sur fixe, la grille s'étend au-delà du corps sur le côté droit.

Solution :

Le problème ne réside pas dans la largeur à 100 % mais avec la propriété grid-template-columns. L'utilisation de pourcentages et d'un écart de grille fixe dépassera 100 % de l'espace disponible.

Comptez plutôt sur l'unité fr pour répartir l'espace libre proportionnellement, en tenant compte de l'écart de grille :

.parent {<br> position:fixe;<br> largeur:100%;<br>gauche:0 ;<br> top:14px;<br> display:grid;<br> grid-template-columns:4fr 6fr;<br> grid-gap:5px;<br> background:#eee;<br>}<br>.left {<br> border:2px rouge uni;<br>}<br>.right {<br> border:2px rouge uni;<br>}

<div class='parent'><br> <div class='left'>LEFT</div><br> <div class= 'right'>RIGHT</div><br></div>

En utilisant les unités fr, la grille répartira désormais correctement l'espace , en veillant à ce qu'il reste dans les limites du corps.

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!

css html using class Property JS console display position border background issue

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment vraiment désactiver le défilement horizontal sur une page Web ?Article suivant：Comment vraiment désactiver le défilement horizontal sur une page Web ?

Articles Liés

Voir plus

• Comment préserver l'ordre HTML lors de l'utilisation de « float : right » pour les spans ?
• Comment créer un triangle visuellement attrayant dans un div en utilisant des valeurs en pourcentage ?
• Comment intégrer Google Translate dans votre site Web à l'aide des balises SELECT et OPTION ?
• Comment différer le chargement de fichiers CSS volumineux pour optimiser les performances d'un site Web ?
• Comment effectuer une transition en douceur des propriétés d'affichage et d'opacité dans les animations CSS ?