Solución:
100% puede ser 100% de la altura de cualquier cosa. Por ejemplo, si tengo un padre div esa es 1000px alto y un niño div eso es en 100% altura, entonces ese niño div teóricamente podría ser 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 div está fijado en 100% altura.
Si en cambio hago a ese niño div fijado en 100vh, entonces será solo llenar 100% de 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>Sé que la pregunta es muy antigua y @Josh Beam abordó la mayor diferencia, pero aún hay otra:
Suponga que tiene un <div>, hijo directo de <body> que desea llenar toda la ventana gráfica, por lo que usa 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. Desde el vw tener en cuenta 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 extra) y, como 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 principal 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>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>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 las 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 un 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 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, 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.