samedi 29 mai 2021 à 21:55
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.
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.
Du coup, c'est parfois gênant de ne pas pouvoir mettre des éléments qui adoptent la largeur totale du navigateur.
Un Parallax, un bandeau, c'est toujours sympa, et ça fait une sorte de pause dans la lecture.
J'ai donc trouvé une solution qui semble fonctionner correctement avec tous les navigateurs.
Il s'agit de donner à notre DIV les règles CSS suivantes:
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
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.
Édité 1 fois - Dernière édition: 02/06/2021 à 10:56 Par Limporia.
