"/>

Créer un conteneur enfant plus large que le conteneur parent

Comment faire en sorte que le conteneur enfant déborde de son parent ?

Voici un CodePen dans lequel je teste différentes solutions souvent citées sur stackoverflow. Le but est de faire en sorte que la div enfant déborde et prenne toute la largeur de l’écran.

See the Pen
Full Width Containers in Limited Width Parents
by blogob (@yuyazz)
on CodePen.

La meilleur solution

La solution la plus pratique est la deuxième dans mon exemple :

margin: 0 -100%;
  padding: 0 100%;

En appliquant ces valeurs à la div que l’on veut étendre, la mise en page est respectée au redimensionnement de la fenêtre. Il n’y donc rien de plus à faire pour le responsive. Tous les autres exemples requièrent l’application de media queries, et aussi la nécessité de définir une largeur pour le bloc intérieur.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.