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

138

Acabo de enterarme de una unidad CSS nueva y poco común. vhy vwmida el porcentaje de alto y ancho 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 CSS3?

css viewport-units Richard Hamilton
fuente
77
Lo que hace vw / vh es eliminar la dependencia de cualquier padre y permite el tamaño en función del tamaño de la ventana gráfica.
Pegatinas
2
Compañero lector, la respuesta de IanC bien podría salvar tu día, asegúrate de verificarlo.
Skippy le Grand Gourou

Respuestas:

167

100%puede ser 100%de la altura de cualquier cosa. Por ejemplo, si tengo un padre divque es 1000pxalto y un niño divque está en 100%altura, entonces ese niño divpodría ser, en teoría, 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, aunque eso divesté establecido en 100%de altura .

Si, en cambio, establezco ese elemento secundario diven 100vh, entonces solo ocupará 100%la altura de la ventana gráfica , y no necesariamente el padre 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>
Expandir fragmento

Josh Beam
fuente
Tenía una barra lateral que estaba anidada dentro de una "fila" de arranque y no pude hacer que el tamaño de la página completa incluso después de establecer la altura: 100%. Lo que funcionó para mí fue 100vh
raghav710
28

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

Supongamos que tiene un <div>hijo directo <body>que desea llenar toda la ventana gráfica, por lo que utiliza width: 100vw; height: 100vh;. Todo funciona igual que width: 100%; height: 100vh;hasta que agregue más contenido y aparezca una barra de desplazamiento vertical. Dado que la vwcuenta para la barra de desplazamiento como parte de la ventana gráfica, width: 100vw;será un poco más grande que 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:

Utilizando 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>
Expandir fragmento

Utilizando 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>
Expandir fragmento

IanC
fuente
2
El CSS body { overflow: hidden }hará que las barras de desplazamiento no se muestren.
Dave F
2

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 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 ventana gráfica") 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 , tal vez 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.

Slack Undertow
fuente
1

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, 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


fuente
0

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.


fuente
1
La respuesta de IanC sí. "Dado que vw representa la barra de desplazamiento como parte de la ventana gráfica, ancho: 100vw; será ligeramente mayor que el ancho: 100% ;."
j08691