Différence entre Largeur: 100% et largeur: 100vw?
Je dois adapter un iframe en hauteur d'écran. Évidemment, je voulais 100% comme en largeur mais, puisque cela ne fonctionne pas, j'ai utilisé 100vh. Mais vh comme vw est pas exactement 100%. Dans mon ordinateur portable à travers chrome alors que la largeur 100% rend parfaitement sans avoir besoin d'une barre de défilement horizontale, vw a environ un centimètre de plus.
3 réponses
Vw et vh représentent respectivement la largeur et la hauteur de la fenêtre d'affichage.
La différence entre l'utilisation de width: 100vw au lieu de width: 100% est que si 100% permet à l'élément de s'adapter à tout l'espace disponible, la largeur de la fenêtre 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 doit se comporter de la même manière que 100%.
La réponse de Havengard ne semble pas être strictement vraie. J'ai trouvé que vw remplit la largeur de la fenêtre, mais ne tient pas compte des barres de défilement. Donc, si votre contenu est plus grand que la fenêtre d'affichage (de sorte que votre site a une barre de défilement verticale), l'utilisation de vw entraîne une petite barre de défilement horizontale. J'ai dû changer width: 100vw pour width: 100% pour me débarrasser de la barre de défilement horizontale.
Utiliser un ID pour iframe:
Id = "frame" donc ce sera:
<iframe id="frame">
ensuite, vous devez ajouter ceci à votre CSS:
#frame {
width:
height:
{