Nuevas Unidades CSS Para Diseños Web Más Estables

Durante años, el uso de 100vh fue la solución rápida para controlar la altura del viewport en diseños responsive. Pero en móvil, esa estrategia tenía trampa: la barra del navegador provocaba saltos y layouts rotos. Las nuevas unidades svh, lvh y dvh llegan para solucionarlo.

• Problemas del 100vh en móvil
• Nuevas unidades: svh, lvh y dvh
• Ventajas técnicas y casos de uso
• Comparativa con 100vh
• Conclusión

Problemas del 100vh en móvil

Cuando se usaba 100vh, los diseños se rompían en el móvil al mostrarse o esconderse la barra del navegador. Esto afectaba sobre todo a:

• Hero sections que desaparecían parcialmente
• Scrolls fantasmas en pantallas pequeñas
• Comportamientos inconsistentes entre navegadores

Nuevas unidades: svh, lvh y dvh

CSS introduce tres nuevas unidades específicas para altura de viewport:

• svh: altura del viewport cuando la página carga. Ideal para diseño inicial sin interacción.
• lvh: altura máxima disponible, sin barras del navegador. Estático.
• dvh: altura dinámica, que cambia según la interfaz del navegador. Perfecto para apps web.

Ventajas técnicas y casos de uso

Estas unidades ofrecen precisión en el cálculo de alturas y evitan saltos visuales. Algunos usos recomendados:

Comparativa con 100vh

El siguiente código muestra cómo se comportan visualmente:

.pantalla {
  height: 100svh; /* vs 100vh que puede fallar */
}

El uso de estas unidades permite que el contenido no salte ni se corte al interactuar con la interfaz del navegador.

Conclusión

Si el objetivo es ofrecer una experiencia profesional, sin sorpresas visuales y adaptada a todos los dispositivos, svh, lvh y dvh son el nuevo estándar.