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:
-
¿Por qué vw incluye la barra de desplazamiento como parte de la ventana gráfica?
-
El uso de 100vw provoca un recorte horizontal cuando hay barras de desplazamiento verticales
-
Evite que 100vw cree desplazamiento horizontal
-
Diferencia entre ancho: 100% y ancho: 100vw?
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>