Tutorial WordPress: Cómo forzar alto mínimo de hero para cubrir viewport con CSS

Problema y objetivo

En muchos temas de WordPress se utiliza una sección hero o portada que debería ocupar al menos la altura completa del viewport para crear impacto visual. El objetivo de este tutorial es explicar con todo lujo de detalles cómo forzar un alto mínimo de hero para cubrir el viewport con CSS de forma robusta y compatible, incluyendo soluciones modernas (100dvh), soluciones tradicionales (100vh), ajustes para cabeceras fijas y un fallback JavaScript para navegadores y situaciones móviles donde la barra de direcciones cambia el alto real del viewport.

Conceptos clave

100vh: representa el 100% de la altura del viewport CSS. Es simple y efectivo, pero puede fallar en móviles donde la barra de navegación/URL aparece y desaparece.
100dvh / 100svh / 100lvh: unidades dinámicas más modernas (dvh = dynamic viewport height) que tratan de respetar el viewport real. No están soportadas en todos los navegadores.
CSS variables: permiten ajustar dinámicamente el alto si se calcula desde JavaScript (ej. –vh).
Flexbox: ideal para centrar verticalmente el contenido dentro del hero mientras el contenedor tiene min-height para cubrir el viewport.

Soluciones CSS modernas y su uso

1) Método básico: min-height: 100vh

Es la forma más directa. Útil cuando no hay problemas con barras móviles.

/ Clase básica para el hero /
.hero {
  min-height: 100vh
  display: flex / facilita el centrado vertical /
  align-items: center
  justify-content: center
  background-size: cover
  background-position: center
}

2) Usar 100dvh cuando esté disponible (mejor comportamiento en móviles modernos)

Algunos navegadores modernos soportan la unidad dvh (dynamic viewport height). Puedes usarla con fallback a 100vh:

/ Preferir 100dvh si está soportado, si no usar 100vh /
.hero {
  min-height: 100dvh / navegadores modernos /
  min-height: 100vh  / fallback /
}

3) Ajustar cuando hay cabecera fija (sticky header)

Si tienes una cabecera fija cuyo alto conoces o puedes medir, resta su altura del 100vh para que el hero no quede oculto tras la cabecera.

/ usando una variable CSS para la altura del header /
:root {
  --header-height: 72px / ajusta según tu tema /
}

.hero-offset {
  min-height: calc(100vh - var(--header-height))
}

/ si usas dynamic viewport, preferirlo /
.hero-offset {
  min-height: calc(100dvh - var(--header-height))
}

4) Centrando contenido verticalmente con flexbox

Flexbox permite que el contenido del hero quede perfectamente centrado sin importar su altura. Útil para titulares, botones y formularios de suscripción.

.hero {
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  text-align: center
  padding: 2rem
  min-height: 100vh / o 100dvh / calc(...) según tu caso /
}

Problema móvil: la barra de direcciones que cambia el alto

En móviles (Safari iOS, Chrome Android) la barra de URL se oculta/muestra al hacer scroll, cambiando el valor real de 100vh. Para mitigarlo se usan dos enfoques:

Usar 100dvh cuando el navegador lo soporte.
Calcular con JavaScript una variable CSS –vh basada en window.innerHeight y usarla en CSS: min-height: calc(var(–vh) 100).

Solución robusta con JavaScript (fácil de integrar en WordPress)

Este script calcula dinámicamente la unidad de altura real y la inyecta en una variable CSS además actualiza la variable al redimensionar o rotar el dispositivo. Úsalo como fallback para navegadores sin 100dvh o para garantizar consistencia.

(function() {
  function setVh() {
    var vh = window.innerHeight  0.01
    document.documentElement.style.setProperty(--vh, vh   px)
  }
  setVh()
  window.addEventListener(resize, setVh)
  window.addEventListener(orientationchange, setVh)
})()

Y la parte CSS muestra cómo consumir esa variable:

/ usar la variable --vh creada por JS /
.hero {
  min-height: calc(var(--vh, 1vh)  100)
  display: flex
  align-items: center
  justify-content: center
}

Cómo integrar estos fragmentos en WordPress

Opciones de integración (elige una según te convenga):

Customiser → CSS adicional: pega el CSS mínimo si no necesitas lógica JS. Rápido para pruebas.
style.css del child theme: ideal para mantener cambios permanentes y versionables.
Encolar archivos y añadir JS desde functions.php: recomendado para un manejo correcto y rendimiento.

Ejemplo de cómo añadir el script de ajuste de viewport como inline script en WordPress (functions.php):

/ Añadir en functions.php del tema hijo /
function tema_viewport_fix_enqueue() {
  / Registrar un manejador de script vacío para poder inyectar JS inline correctamente /
  wp_register_script( viewport-fix,  )
  wp_enqueue_script( viewport-fix )

  inline_js = (function(){ function setVh(){var vh=window.innerHeight0.01document.documentElement.style.setProperty(--vh,vh px) } setVh() window.addEventListener(resize, setVh) window.addEventListener(orientationchange, setVh) })()
  wp_add_inline_script( viewport-fix, inline_js )
}
add_action( wp_enqueue_scripts, tema_viewport_fix_enqueue )

Si prefieres tener el script en un archivo separado, encola el archivo .js y asegúrate de colocarlo en el footer para no bloquear el render:

function tema_viewport_fix_enqueue_file() {
  wp_enqueue_script(
    viewport-fix-file,
    get_stylesheet_directory_uri() . /js/viewport-fix.js,
    array(),
    1.0,
    true
  )
}
add_action( wp_enqueue_scripts, tema_viewport_fix_enqueue_file )

Donde el archivo js contiene exactamente la función de cálculo mostrada en el ejemplo de JavaScript anterior.

Marcado HTML sugerido para el hero

Ejemplo simple del HTML que puede renderearse en una plantilla o bloque (usa la clase hero en tu bloque o plantilla PHP del tema):



  
    Tu titular impactante
    Subtítulo breve que explique la propuesta de valor.
    Contacta

Buenas prácticas, accesibilidad y rendimiento

Asegura que el hero no oculte contenido crítico (por ejemplo, evita superponer navegación no intencional o información importante).
Si tu header es fijo, asegúrate de que el foco y el orden del DOM sigan siendo correctos para usuarios de teclado y lectores de pantalla.
Optimiza imágenes de fondo (next-gen formats, lazy-loading cuando aplique) para no penalizar el LCP.
Evita cálculos JS pesados en resize el script propuesto solo escribe una variable CSS y es muy ligero.
Comprueba en dispositivos móviles reales o emuladores: el resultado visual puede cambiar según las barras del navegador.

Conclusión práctica

Para cubrir el viewport con un hero de forma fiable: combina CSS moderno (100dvh cuando sea posible) con un fallback JavaScript que establezca una variable –vh basada en window.innerHeight, usa min-height en lugar de height para mantener flexibilidad y aprovecha flexbox para centrar el contenido. Integra CSS en tu child theme o Customizer y encola el JS en functions.php para mantener la solución ordenada y compatible con actualizaciones del tema.

SushiHost