La pesadilla del scroll en celulares a 100 vh de altura

Presento soluciones al clásico problema del pequeño scroll en responsive design.

hace 4 meses   •   3 min de lectura

Por Andrés Tuñón

Suena a título de película pero es anécdota; si has diseñado un sitio alguna vez has tenido que pasar por esto: Defines un layout que abarque todo el espacio disponible, revisas el sitio en el celular y hay un pequeño scroll. ¡Toda un dilema!

Les deberé los ejemplos, pero no tuve tanto tiempo disponible, será para otra ocasión..

¿A qué se debe esto?

Los celulares suelen tener una barra de rutas que es dinámico, en donde sale el nombre del sitio y ese pequeño espacio suele correr todo el resto del sitio.

URL bar en navegadores
URL bar en navegadores

Por si las dudas

Antes de empezar, existe un meta tag para ajustar el ancho y el zoom del dispositivo, primero procura colocarlo o tendrás problemas para ajustarlo obviamente:

<meta name="viewport" content="width=device-width, initial-scale=1">

Ahora sí, hay múltiples soluciones dependiendo de tus necesidades y tecnologías:

Solución Clásica

Expandir el tag de body y html

body, html {
    height: 100%;
  }

Dejo la referencia a la respuesta del equipo de Chromium al final del artículo

Solución calculando por JS

Por JS calcula a partir del innerHeight

/*CSS*/

.my-element {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

Luego por JS defines esa variable --vh en el CSS:

/*JS*/

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

Hay una nueva propiedad por ahí rondando llamada -webkit-fill-available  (sinceramente aún no la utilizo)

body {
    min-height: 100vh;
    min-height: fill-available;
    min-height: -webkit-fill-available;
}
html {
    height: fill-available;
    height: -webkit-fill-available;
}

Solución a ojo

Esta la he aplicado, vas restando hasta que se ajuste al tamaño del celular

.containerElement {
  min-width: calc(100vh - 80px);
}

Solución para Tailwind

En tailwind no tienes tanta libertad para modificar el CSS (la idea es no tocar el CSS), pero hay unos truquillos para expandir los elementos:

<main class="relative min-h-full">
    <div class="absolute inset-0">
        ...
    </div>
</main>

Referencias

The trick to viewport units on mobile | CSS-Tricks
Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own
solución por JS
844848 - chromium - An open-source project to help move the web forward. - Monorail
Solución clásica y rápida
Viewport meta tag - HTML: HyperText Markup Language | MDN
This article describes how to use the “viewport” <meta> tag to control the viewport’s size and shape.
viewport meta tag

Corre la voz

Sigue leyendo