<p>Il m'arrive parfois de coder dans des sites internet dans lesquels la taille de la page est deja prévue d'avance et avec une dimension du genre max-width:1200px.</p>
<p>Cela arrive assez souvent quand on doit insérer des pages CMS dans Prestashop, Wordpress etc, pour lesquelles le contenu de la page s'insère dans une architecture deja définie.</p>
<p>Du coup, c'est parfois gênant de ne pas pouvoir mettre des éléments qui adoptent la largeur totale du navigateur.</p>
<p>Un Parallax, un bandeau, c'est toujours sympa, et ça fait une sorte de pause dans la lecture.</p>
<p>J'ai donc trouvé une solution qui semble fonctionner correctement avec tous les navigateurs.</p>
<p>Il s'agit de donner à notre DIV les règles CSS suivantes:</p>
<blockquote>
<p> width: 100vw;<br />
position: relative;<br />
left: 50%;<br />
right: 50%;<br />
margin-left: -50vw;<br />
margin-right: -50vw;</p>
</blockquote>
<p>De cette façon, l'élément se collera automatiquement à gauche et à droite du navigateur et ce que vous mettrez dedans prendra la largeur totale de la page.</p>