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

138

Je viens d'apprendre l'existence d'une nouvelle unité CSS peu commune. vhet vwmesurez 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 respectivement un pourcentage de la largeur et de la hauteur de la fenêtre: 100vw est 100% de la largeur, 80vw est 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 CSS3?

css viewport-units Richard Hamilton
la source
7
Ce que fait vw / vh est de supprimer la dépendance à tout parent et autorise le dimensionnement en fonction de la taille de la fenêtre.
Autocollants
2
Cher lecteur, la réponse d'IanC pourrait bien vous sauver la journée, assurez-vous de la vérifier.
Skippy le Grand Gourou

Réponses:

167

100%peut être 100%de la hauteur de n'importe quoi. Par exemple, si j'ai un parent divde 1000pxgrande taille et un enfant diven 100%hauteur, cet enfantdiv pourrait théoriquement être beaucoup plus grand que la hauteur de la fenêtre, ou bien plus petit que la hauteur de la fenêtre, même si elle divest définie à 100%hauteur .

Si je fais à la place de cet enfant divdéfini à 100vh, alors il ne remplira que 100%la hauteur de la fenêtre , et pas nécessairement le parent div.

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;
}
<div class="parent">
    <div class="child">
        100% height
        (parent is 200px)
    </div>
</div>

<div class="viewport-height">
    100vh height
</div>
Développer l'extrait

Josh Beam
la source
J'avais une barre latérale qui était imbriquée dans une "ligne" de bootstrap et je n'ai pas pu la faire en pleine page même après avoir réglé la hauteur: 100%. Ce qui a fonctionné pour moi était de 100vh
raghav710
28

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

Supposons que vous ayez un <div>enfant direct de <body>celui dont vous voulez remplir toute la fenêtre, donc vous l'utilisez 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 vwcompte de la barre de défilement dans le cadre de la fenêtre, 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 à l'utilisateur pour voir 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 considération 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:

Utilisation 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>
Développer l'extrait

Utilisation 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>
Développer l'extrait

IanC
la source
2
Le CSS body { overflow: hidden }empêchera l'affichage des barres de défilement.
Dave F
2

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

Voici quelques discussions connexes sur les unités de 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 de pourcentage de la fenêtre") indique que "toute barre de défilement est supposée ne pas exister".

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

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

Slack Undertow
la source
1

les unités vw (largeur de vue) et vh (hauteur de vue) sont liées à la taille du port de vue, où 100vw ou vh est 100% de la largeur / hauteur du port de vue.

Par exemple, si un port de vue a une largeur de 1600 pixels et que vous spécifiez quelque chose comme étant 2vw, ce sera l'équivalent de 2% de la largeur du port de vue, soit 32 pixels.

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


la source
0

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.


la source
1
La réponse d'IanC le fait. "Puisque le compte vw pour la barre de défilement dans le cadre de la fenêtre d'affichage, width: 100vw; sera légèrement plus grand que width: 100% ;."
j08691