Una respuesta sorprendentemente común cuando se pregunta a la gente sobre cosas que arreglarían sobre cualquier cosa en CSS, es mejorar el manejo de las unidades de visualización.
Una cosa que surge a menudo es cómo se relacionan con las barras de desplazamiento. Por ejemplo, si un elemento tiene el tamaño 100vw y se extiende de borde a borde, está bien siempre que la página no tenga una barra de desplazamiento vertical. Si tiene una barra de desplazamiento vertical, entonces 100vw es demasiado ancho, 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 lo contrario, no lo necesitaría, por ejemplo. (Manifestación)
Otro escenario involucra a los navegadores móviles. Puede usar unidades de ventana gráfica para ayudarlo a colocar un pie de página fijo en la parte inferior de la pantalla. Pero luego puede aparecer el cromo del 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:
A la izquierda, la barra de navegación del navegador (considerada cromada del navegador) cubre el pie de página, lo que hace que parezca que el pie de página está más allá de 100vh cuando no es así. A la derecha, el -webkit-fill-available se está utilizando la propiedad en lugar de las unidades de ventana para solucionar el 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 asegurarse de que el html elemento estaba siendo utilizado, como nos dijeron 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 en este momento. Pero recibí una serie de respuestas a mi tweet que apuntaban a otros posibles problemas con el uso de esto (los efectos de los dispositivos giratorios, Chrome no ignora por completo la propiedad, etc.)
Sería mejor obtener alguna solución real entre navegadores para esto algún día, pero no veo ningún problema al usar esto como una mejora. Es extraño usar una propiedad con prefijo de proveedor como una mejora progresiva, pero bueno, el mundo es extraño.
Enlace directo →