[CSS] Une section en pleine largeur au milieu d'une zone contrainte en largeur

Lors de  la mise en forme d'une page web, il est assez courant de mettre en place une zone avec une largeur limitée afin d'y placer texte et autres contenus. Ceci se fait souvent avec la classe .container pour les utilisateurs de Bootstrap.

Un problème se pose lorsqu'on souhaite placer un bloc au milieu de cette zone qui dépasserait en largeur pour prendre toute la largeur de la fenêtre du navigateur...

Voici une solution simple que j'utilise depuis plusieurs années dans mes thèmes Drupal, sous forme de mixin SASS puis sous forme de CSS pur, prête à coller dans votre projet.

Mixin SASS

/// Mixin - Full Width, even outside container
/// @param {bool} $undo [false]
/// @link https://css-tricks.com/full-width-containers-limited-width-parents/ Source
@mixin full-width($undo: false) {
  @if $undo {
    margin-left: 0;
    margin-right: 0;
    position: static;
    left: auto;
    right: auto;
    width: auto;
    max-width: 100%;
  } @else {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
}

CSS prêt à copier/coller

.fullwidth {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Source (en anglais) : https://css-tricks.com/full-width-containers-limited-width-parents/