Comment faire du débordement de contenu une division limitante en CSS ?

Contenu de débordement d'un Div limitant

En CSS, un élément div agit généralement comme un conteneur, définissant une largeur et une marge spécifiques. Cependant, il existe des cas où vous souhaiterez peut-être autoriser le débordement du contenu au-delà des limites du div, s'étendant sur toute la largeur de l'écran. Voici comment y parvenir :

Contourner le conteneur

La solution la plus simple consiste à supprimer la restriction du conteneur. Au lieu de conserver tout le contenu dans le div, créez un nouveau div pour l'élément pleine largeur. Cela permet à l'image ou à la couleur d'arrière-plan de s'étendre au-delà des limites du conteneur d'origine.

Dans l'exemple suivant, nous créons un div « pleine largeur » en dehors du « conteneur » :

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

HTML :

<div class="container">
  <header></header>
</div>
<div class="fullwidth">
  <div class="container">
    <div class="mydiv">...</div>
  </div>
</div>
<div class="container">
  <footer></footer>
</div>

En supprimant le conteneur du div pleine largeur, nous permettons à son arrière-plan de s'étendre sur toute la largeur du div. screen.

Dépasser la largeur du conteneur

Une autre approche consiste à utiliser la fonction calc() pour ajuster dynamiquement la largeur de l'élément. Cela peut être appliqué au conteneur parent ou à l'élément pleine largeur lui-même.

Par exemple, nous pouvons modifier le div "conteneur" pour l'étendre au-delà de sa largeur maximale :

.container {
  width: calc(100% + 60px);
  max-width: 1280px;
}

Dans ce cas, le conteneur aura désormais une largeur qui dépasse sa largeur maximale, permettant à tout contenu débordant de s'étendre au-delà de la limite d'origine.

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!