web-dev-qa-db-fra.com

Unités CSS - Quelle est la différence entre vh/vw et%?

Je viens d'apprendre sur une nouvelle unité CSS rare. vh et vw mesurent respectivement le pourcentage de hauteur et de largeur de la fenêtre.

J'ai regardé cette question de Stack Overflow, mais cela a rendu les unités encore plus similaires.

Comment fonctionnent les unités vw et vh

La réponse dit spécifiquement

vw et vh sont un pourcentage de la largeur et de la hauteur de la fenêtre, respectivement: 100vw correspond à 100% de la largeur, 80vw correspond à 80%, etc.

Cela semble être exactement la même chose que l'unité %, qui est plus courante.

Dans Developer Tools, j'ai essayé de changer les valeurs de vw/vh en% et vice-versa et j'ai obtenu le même résultat.

Y a-t-il une différence entre les deux? Sinon, pourquoi ces nouvelles unités ont-elles été introduites dans CSS3?

cssviewport-units
72
Richard Hamilton

100% peut être 100% de la hauteur de n'importe quoi. Par exemple, si j'ai un parent div de 1000px hauteur et un enfant div de 100% hauteur, cet enfant div pourrait théoriquement être beaucoup plus grand que la hauteur de la fenêtre d'affichage, ou beaucoup plus petit que la hauteur de la fenêtre d'affichage, même si cette div est définie à 100% hauteur.

Si je place plutôt cet enfant div à la valeur 100vh, alors il va ne remplissez que 100% de la hauteur de la fenêtre d'affichage}, et pas nécessairement le parent div.

Voir ceci jsfiddle :

output

body,
html {
    height: 100%;
}

.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}

.child {
    background: pink;
    height: 100%;
    width: 100%;
}

.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}
103
Josh Beam

Je sais que la question est très ancienne et @Josh Beam a abordé la plus grande différence, mais il en reste une autre:

Supposons que vous ayez un <div>, enfant direct de <body> et que vous souhaitiez remplir toute la fenêtre d'affichage, vous utiliserez donc width: 100vw; height: 100vh;. Tout fonctionne de la même manière que width: 100%; height: 100vh; jusqu'à ce que vous ajoutiez plus de contenu et qu'une barre de défilement verticale apparaisse. Étant donné que le compte vw de la barre de défilement dans la fenêtre de visualisation, width: 100vw; sera légèrement plus grand que width: 100%;. Cette petite différence finit par ajouter une barre de défilement horizontale (nécessaire pour que l'utilisateur voie cette petite largeur supplémentaire) et par conséquent, la hauteur serait également un peu différente dans les deux cas.

Cela doit être pris en compte pour décider lequel utiliser, même si la taille de l'élément parent est la même que la taille de la fenêtre d'affichage du document.

Exemple:

Utiliser width:100vw;:

.fullviewport {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100vw;
  height: 20vh;
  background-color: blue;
}
<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

Utiliser width:100%;:

.fullviewport {
  width: 100%;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100%;
  height: 20vh;
  background-color: blue;
}
<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

10
IanC

Merci pour votre réponse et votre exemple de code, @IanC. Cela m'a beaucoup aidé. Une précision: je pense que vous vouliez dire "barre de défilement" lorsque vous avez écrit "barre latérale". 

Voici quelques discussions sur les unités de la fenêtre comptant les barres de défilement que j'ai également trouvées utiles:

La spécification W3C pour les unités vw, vh, vmin, vmax (les "longueurs en pourcentage de la fenêtre de visualisation") indique que "toutes les barres de défilement sont supposées n'exister pas".

Apparemment, Firefox soustrait la largeur de la barre de défilement à 100vw, comme le commentaire de @ Nolonar à Différence entre Width: 100% et width: 100vw? observe, citant "Puis-je utiliser". 

Puis-je utiliser , peut-être en tension avec la spécification (?), Dit tous les navigateurs autres que Firefox actuellement "à tort" considèrent 100vw comme la largeur entière de la page, barre de défilement verticale comprise.

1
Slack Undertow

Il y a une différence qui n'a pas nécessairement été soulevée. 100vw inclut la largeur de la barre de défilement, tandis que 100% ne l'inclut pas. C'est une petite différence, mais importante lors de la conception.

0
an _user

les unités vw (view-width) et vh (view-height) sont en relation avec la taille du port de visualisation, où 100vw ou vh est égal à 100% de la largeur/hauteur du port de visualisation. 

Par exemple, Si un port de vue a une largeur de 1600 pixels et que vous spécifiez quelque chose comme étant 2vw, cela équivaudra à 2% de la largeur du port de visualisation, ou 32 pixels.

% unité est toujours basé sur la largeur de l'élément parent de l'élément actuel

0
user7135071