Comment puis-je rendre un DIV enfant plus large que son parent en utilisant CSS ?

Extension de la largeur d'un DIV enfant au-delà des limites des parents avec CSS

L'extension de la largeur d'un DIV enfant en dehors de son conteneur parent est réalisable à l'aide de CSS. Cela permet au DIV enfant de s'étendre sur toute la fenêtre d'affichage du navigateur.

Solution générique

Pour y parvenir, utilisez les propriétés CSS suivantes sur l'élément enfant :

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

• largeur : 100vw ; définit la largeur de l'enfant à 100 % de la fenêtre d'affichage, couvrant toute la fenêtre du navigateur.
• position : relative ; garantit que le positionnement de l'enfant est relatif à son parent, permettant des ajustements.
• gauche : calc(-50vw 50%); décale le bord gauche de l'enfant de 50 % de la fenêtre d'affichage moins 50 % de la largeur du parent, en l'alignant avec la limite gauche du navigateur.

Exemple

<div class="parent">
  <div class="child">Child</div>
</div>

.parent {
  width: 400px;
  margin: 0 auto;
  background-color: #ccc;
}

.child {
  height: 100px;
  border: 1px solid #000;
  background-color: #fff;
}

Cet exemple crée un DIV parent de 400 px de large et un DIV enfant qui étend toute la fenêtre d'affichage. largeur.

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!