css viewport-units

Unidades CSS: ¿cuál es la diferencia entre vh/vw y%?



vh to px (5)

Gracias por su respuesta y ejemplo de código, @IanC. Me ayudó mucho. Una aclaración: creo que quiso decir "barra de desplazamiento" cuando escribió "barra lateral".

Aquí hay algunas discusiones relacionadas sobre las unidades de ventana gráfica que cuentan barras de desplazamiento que también encontré útiles:

La especificación W3C para las unidades vw, vh, vmin, vmax (las "longitudes de porcentaje de la vista") dice "se supone que las barras de desplazamiento no existen".

Aparentemente, Firefox resta el ancho de la barra de desplazamiento de 100vw, como el comentario de @ Nolonar en Diferencia entre ancho: 100% y ancho: 100vw? observa, citando "¿Puedo usar".

¿Puedo usar , quizás en tensión con la especificación (?), Dice que todos los navegadores que no sean Firefox actualmente consideran "incorrectamente" que 100vw es el ancho completo de la página, incluida la barra de desplazamiento vertical.

Acabo de enterarme de una unidad CSS nueva y poco común. vh y vw miden el porcentaje de altura y anchura de la ventana gráfica respectivamente.

Miré esta pregunta de Stack Overflow, pero hizo que las unidades se vean aún más similares.

¿Cómo funciona la unidad vw y vh?

La respuesta dice específicamente

vw y vh son un porcentaje del ancho y alto de la ventana, respectivamente: 100vw es el 100% del ancho, 80vw es el 80%, etc.

Esto parece exactamente lo mismo que la unidad % , que es más común.

En Developer Tools, intenté cambiar los valores de vw / vh a% y viceversa y obtuve el mismo resultado.

¿Hay diferencia entre los dos? Si no, ¿por qué se introdujeron estas nuevas unidades en CSS3 ?


Hay una diferencia que no necesariamente se ha planteado. 100vw incluye el ancho de la barra scrool, mientras que 100% no lo incluye. Es una pequeña diferencia, pero importante al hacer diseño.


Las unidades vw (ancho de vista) y vh (alto de vista) son relacionadas con el tamaño del puerto de vista, donde 100vw o vh es el 100% del ancho / alto del puerto de vista.

Por ejemplo, si un puerto de vista tiene un ancho de 1600px y especifica algo como 2vw, eso será el equivalente al 2% del ancho del puerto de vista, o 32px.

% unit siempre se basa en el ancho del elemento principal del elemento actual


Sé que la pregunta es muy antigua y @Josh Beam abordó la mayor diferencia, pero todavía hay otra:

Suponga que tiene un <div> , hijo directo de <body> que desea llenar toda la ventana width: 100vw; height: 100vh; , por lo que usa width: 100vw; height: 100vh; width: 100vw; height: 100vh; . Todo funciona igual que el width: 100%; height: 100vh; width: 100%; height: 100vh; hasta que agregue más contenido y aparezca una barra de desplazamiento vertical. Dado que vw cuenta la barra de desplazamiento como parte de la ventana width: 100vw; , width: 100vw; será un poco más grande que el width: 100%; . Esta pequeña diferencia termina agregando una barra de desplazamiento horizontal (requerida para que el usuario vea ese pequeño ancho adicional) y, en consecuencia, la altura también sería un poco diferente en ambos casos.

Eso debe tenerse en cuenta al decidir cuál usar, incluso si el tamaño del elemento primario es el mismo que el tamaño de la ventana gráfica del documento.

Ejemplo:

width:100vw; uso 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>

width:100%; uso 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>


100% puede ser el 100% de la altura de cualquier cosa. Por ejemplo, si tengo un div principal que tiene 1000px alto y un div secundario que está al 100% altura, entonces ese div secundario podría ser teóricamente mucho más alto que la altura de la ventana gráfica, o mucho más pequeño que la altura de la ventana gráfica, a pesar de que ese div se establece al 100% altura .

Si, en cambio, hago que el div hijo se establezca en 100vh , entonces solo 100vh el 100% de la altura de la ventana gráfica , y no necesariamente el div padre.

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>