Corrección de CSS para 100vh en WebKit móvil

Una respuesta sorprendentemente común cuando se pregunta a la gente sobre cosas que arreglarían en CSS es mejorar el manejo de las unidades de ventana gráfica.

Una cosa que surge a menudo es cómo se relacionan con las barras de desplazamiento. Por ejemplo, si un elemento tiene un tamaño 100vwy se extiende de borde a borde, es bueno siempre que la página no tenga una barra de desplazamiento vertical. Si tiene una barra de desplazamiento vertical, entonces 100vwes demasiado ancha y la presencia de esa barra de desplazamiento vertical activa una barra de desplazamiento horizontal porque las unidades de ventana gráfica no tienen una forma elegante/opcional de manejar eso. Por lo tanto, es posible que esté ocultando el desbordamiento en el cuerpo cuando, de otro modo, no sería necesario, por ejemplo. ( Demostración )

Otro escenario involucra a los navegadores móviles. Puede utilizar unidades de ventana gráfica para ayudarle a colocar un pie de página fija en la parte inferior de la pantalla. Pero entonces puede aparecer Chrome en el navegador (por ejemplo, navegación, teclado, etc.) y puede cubrir el pie de página, porque el navegador móvil no considera ningún cambio en el tamaño de la ventana gráfica.

Matt Smith documenta este problema:

Y una especie de solución:

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

Lo anterior se actualizó para garantizar que el htmlelemento se estuviera utilizando, ya que nos dijeron que Chrome está actualizando el comportamiento para que coincida con la implementación de Firefox.

¿Esto realmente funciona? […] No he tenido problemas con ninguna de las pruebas que he realizado y estoy usando este método en producción ahora mismo. Pero recibí una serie de respuestas a mi tweet que señalaban otros posibles problemas con el uso de esto (los efectos de los dispositivos giratorios, Chrome no ignora completamente la propiedad, etc.)

Sería mejor obtener alguna solución real para varios navegadores para esto algún día, pero no veo ningún problema al usar esto como una mejora. Es extraño utilizar una propiedad con prefijo de proveedor como mejora progresiva, pero bueno, el mundo es extraño.

Enlace directo →