🧭 ¿Alguna vez te has preguntado cómo los diseñadores logran que un sitio web se vea perfecto en cualquier pantalla, ya sea un móvil diminuto o una pantalla ultra ancha?
Pues bien, detrás de esa magia visual se encuentran las unidades de medida relativas, y una de las más fascinantes y útiles es el vh.
📐 La lógica detrás de las unidades relativas en CSS
Antes de sumergirnos en el misterioso universo del vh, hagamos una pausa.
En el desarrollo web, existen dos tipos de unidades de medida: absolutas y relativas.
Las absolutas, como los pixeles (px), son fijas y no cambian sin importar el dispositivo.
Pero el mundo no se navega solo en ordenadores de escritorio, ¿verdad?
Aquí entran las unidades relativas, que se adaptan al tamaño de la ventana o a elementos contenedores.
Y aquí es donde el vh brilla con luz propia.
🌍 ¿Qué significa exactamente «vh»?
La sigla vh significa «viewport height«, es decir, la altura de la ventana gráfica.
Un 1vh equivale al 1% de la altura total del viewport del navegador.
Ni más, ni menos.
¿Tu pantalla mide 1000 píxeles de alto? Entonces 1vh son 10 píxeles.
¿Cambiás el tamaño de la ventana? El vh también cambia.
Es como tener una cinta métrica que se estira o encoge con la pantalla.
🧪 ¿Por qué usar vh en lugar de píxeles?
Porque los píxeles no tienen idea de lo que está pasando en la ventana del navegador.
Son rígidos. Estáticos. Obsoletos, si me permites ser drástico.
En cambio, el vh permite construir interfaces que respiran, que se adaptan, que respetan al usuario y a su dispositivo.
Un banner puede ocupar 100vh y llenar toda la pantalla, sin importar su tamaño.
Una sección puede tener 75vh para que siempre quede espacio visible.
Es responsive sin esfuerzo.
📲 Ejemplos reales de uso de vh
Imaginemos que estás diseñando la página de inicio de un sitio de fotografía.
Quieres que la imagen de fondo ocupe toda la altura de la pantalla, para impactar al visitante.
Entonces escribes en CSS:
.hero {
height: 100vh;
background-image: url('fotaza.jpg');
background-size: cover;
}
Con solo eso, tu sección se adapta como un guante.
🎯 Otro caso típico: quieres que el contenido se muestre siempre centrado verticalmente.
El vh se convierte en tu mejor amigo.
🎢 Los beneficios de usar vh
🌐 Adaptabilidad total: ya no necesitas escribir 20 media queries para cada tamaño de pantalla.
🎨 Precisión visual: puedes definir proporciones armónicas entre diferentes secciones.
🧩 Flexibilidad combinada: puedes mezclar vh con otras unidades como rem, %, em o vw para obtener resultados finos.
🛠 Fácil de mantener: menos código, más claridad, más tranquilidad.
⚠️ ¿Qué problemas puede tener el vh?
Nada es perfecto, y el vh tampoco lo es.
Especialmente en móviles, donde los navegadores esconden barras de dirección o botones flotantes, el valor de 100vh puede no coincidir con lo que ves realmente.
Un div que creías que ocupaba toda la pantalla puede acabar cortado o con espacio extra.
Esto ha causado más de un dolor de cabeza a diseñadores despistados.
Por eso, los navegadores modernos han comenzado a introducir nuevas unidades como svh, lvh y dvh, que se comportan mejor en estos casos.
Pero el vh sigue siendo el estándar, el más usado y el más soportado.
🧮 vh frente a otras unidades relativas
| Unidad | Significado | Equivale a |
|---|---|---|
| vh | Viewport Height | % de altura de la ventana |
| vw | Viewport Width | % de anchura de la ventana |
| vmin | Viewport Minimum | % del lado más pequeño |
| vmax | Viewport Maximum | % del lado más grande |
💡 Imagina que estás en un cuarto con paredes móviles. El vh es como decorar una pared que puede cambiar de tamaño sin previo aviso.
🛠 Trucos prácticos con vh
- 100vh para portadas: un clásico que nunca falla.
- 50vh para dividir pantalla: cuando quieres simetría y estilo.
- Usar calc() con vh: ideal para diseños más complejos.
.main {
height: calc(100vh - 60px); /* resto el tamaño del header */
}
- Scrolls controlados: puedes fijar bloques con altura específica que se adaptan dinámicamente.
🔄 El futuro de vh
Como mencionamos antes, los navegadores ya están refinando las unidades vh tradicionales para ajustarse a las particularidades de los móviles.
Las nuevas unidades que se están implementando son:
- svh (small viewport height): la más pequeña altura posible.
- lvh (large viewport height): la más grande, con barras visibles.
- dvh (dynamic viewport height): cambia según el estado del navegador.
Aunque aún no están completamente soportadas en todos los navegadores, es importante que las tengas en el radar.
Porque el diseño web moderno no se trata de tener “la web más bonita”, sino de tener la más funcional para cada usuario.
🧭 Conclusión: el vh no es solo una unidad, es una filosofía
Usar vh es comprometerse con una web adaptable, flexible y elegante.
Es decirle al navegador: “haz lo que quieras, pero mantén esto proporcional”.
Es una de esas herramientas que, una vez descubres su poder, ya no puedes dejar de usar.
💡 Así que, la próxima vez que estés creando una página, pregúntate:
¿Estoy usando vh donde debería?
Porque cada pixel cuenta, pero cada vh se adapta.
