Comment faire déborder le contenu de la largeur d'un conteneur en CSS ?

Contenu débordant au-delà de la largeur du conteneur en CSS

Lors de la conception de mises en page réactives, il est courant d'utiliser un DIV de conteneur pour établir une largeur maximale et appliquer marges pour les écrans plus grands. Cependant, il peut y avoir des scénarios dans lesquels vous devez étendre le contenu au-delà de la largeur désignée du conteneur.

Le défi :

Le code CSS fourni définit un conteneur avec un maximum largeur de 1280px, garantissant qu'il reste centré sur des écrans plus grands. Cependant, l'utilisateur souhaite que certains éléments, tels que des images d'arrière-plan ou des superpositions de couleurs, s'étendent sur toute la largeur de l'écran.

La solution :

Une solution simple est d'éviter d'enfermer complètement le contenu qui déborde dans le conteneur. Au lieu de cela, placez l'élément pleine largeur à l'extérieur du conteneur et appliquez le style nécessaire pour obtenir l'effet souhaité.

Considérez l'exemple suivant :

<div>

.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
.fullwidth {
  background: orange;
}
header {
  height: 50px;
  background: #663399;
}
.mydiv {
  /* background: orange; */
  min-height: 50px;
}
footer {
  height: 50px;
  background: #bada55;
}

Dans ce scénario, l'élément pleine largeur .fullwidth div s'étend sur toute la largeur de l'écran tandis que le div .container interne conserve sa position centrée et sa largeur limitée, même s'il est imbriqué dans le div pleine largeur. La couleur d'arrière-plan est appliquée au div .fullwidth, garantissant qu'il couvre tout l'écran quelles que soient les limites du conteneur.

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!