Comment puis-je faire déborder un élément de son conteneur en CSS ?

Débordement de pleine largeur dans le confinement CSS

Dans la conception Web, il est courant d'utiliser des systèmes de grille CSS avec des conteneurs pour des mises en page réactives. Cependant, certains scénarios nécessitent que les éléments s'étendent au-delà de la largeur du conteneur. Cette question explore comment obtenir ce comportement de « débordement ».

Énoncé du problème

Un développeur rencontre un problème où un div de conteneur restreint la largeur de son contenu, empêchant ainsi les arrière-plans. ou les couleurs de s'étendre au plein écran. Ils recherchent des conseils sur la manière de surmonter cette limitation.

Solution

La solution la plus simple consiste à sortir du confinement du conteneur. Cela peut être fait en :

• Créer un nouveau div en dehors du conteneur existant
• Appliquer l'arrière-plan ou la couleur de l'élément de débordement à ce nouveau div

Dans de cette façon, l'élément pleine largeur peut s'étendre au-delà des limites du conteneur, tandis que le contenu restreint reste dans les limites du conteneur. conteneur.

Exemple

Considérez le code CSS et HTML suivant :

* {
  box-sizing: border-box;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
.fullwidth {
  background: orange;
}

<div class="container">
  <header></header>
</div>
<div class="fullwidth">
  <div class="container">
    <div class="mydiv">
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
</div>
<div class="container">
  <footer></footer>
</div>

Dans cet exemple, le div pleine largeur éclate du confinement du conteneur et étend le fond orange en plein écran. Le contenant intérieur et son contenu restent dans leurs limites respectives.

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!