Différence entre largeur: 100% et largeur: 100vw?
Je dois adapter un iframe à la hauteur de l'écran. Évidemment, je voulais 100% en largeur mais, comme cela ne fonctionne pas, j'ai utilisé 100vh. Mais vh comme vw n'est pas exactement à 100%. Dans mon ordinateur portable via chrome alors que la largeur à 100% restitue parfaitement sans nécessiter de barre de défilement horizontale, vw a environ un centimètre supplémentaire.
vw et vh désignent respectivement la largeur et la hauteur de la fenêtre.
La différence entre utiliser width: 100vw au lieu de width: 100% est que tandis que 100% fera en sorte que l’élément occupe tout l’espace disponible, la largeur de la fenêtre de visualisation a une mesure spécifique, dans ce cas la largeur de l’écran disponible, y compris la marge du document.
Si vous définissez le style body { margin: 0 }, 100vw devrait se comporter de la même manière que 100%.
La réponse de Havengard ne semble pas être strictement vraie. J'ai constaté que vw remplissait la largeur de la fenêtre, mais ne tenait pas compte des barres de défilement. Ainsi, si votre contenu est plus haut que la fenêtre d'affichage (afin que votre site ait une barre de défilement verticale), utilisez vw pour obtenir une petite barre de défilement horizontale. J'ai dû permuter width: 100vw Pour width: 100% Pour me débarrasser de la barre de défilement horizontale.