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.
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`);
Utilizando lo trending
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
Louis Hoebregts
