Espacio en blanco misterioso en la parte inferior de la página web en Mobile-Chrome

He visto muchos problemas de “espacio en blanco misterioso en la parte inferior de la página” aquí en SO, y he jugado con la etiqueta de la viewport gráfica muchas veces, ¡pero aún no puedo entender qué estoy haciendo mal!

La página en cuestión es: http://www.seniorchoicesunl.com/error_documents/error401.php

Esto es lo que parece en el móvil de Chrome Dev Tools: introduzca la descripción de la imagen aquí

¿Alguna idea sobre lo que estoy haciendo mal?

Editar:

establecer CUALQUIER initial-scale es una mala noticia! ¡Hace la fuente demasiado pequeña! Echar un vistazo: introduzca la descripción de la imagen aquí

El aspecto móvil deseado, mientras se mantiene el escritorio y las tabletas como están, es este:

introduzca la descripción de la imagen aquí

PD Solucionar este problema podría solucionar recíprocamente otros problemas relacionados que tengo con otras páginas web.

Agrega esto encima de tu archivo css 🙂

 html,body { width: 100%; height: 100%; margin: 0px; padding: 0px; overflow-x: hidden; } 

Se corrigió el error para mí.

Esto parece solucionar el problema:

  1. Cambie a .
  2. width: 25em; anulación width: 25em; en .sub_container_div en su CSS móvil para que el contenedor se amplíe con el ancho de la vista.

Si no desea que la fuente se amplíe, parece que solo agregar initial-scale=0 también funcionará. Sin embargo, esto hará que el texto sea muy difícil de leer. Puedes jugar con diferentes escalas, pero parece que solo configurarlo solucionará tu problema.

Que está pasando aqui:

  • Has establecido width=device-width , esto hace que el tamaño del diseño en tu página sea igual al ancho de la pantalla del dispositivo. Es decir, hacer un elemento al 100% le dará el mismo ancho que la pantalla.
  • Chrome infiere la altura del diseño utilizando el ancho y la relación de aspecto de la pantalla. ie altura = ancho / aspectRatio
  • El elemento sub_container_div en realidad termina siendo mucho más ancho que el ancho de diseño de la página. En mi caso en un Nexus 6, el ancho del dispositivo es 412px mientras que el sub_container_div es 594px ancho.
  • Como el contenido es más ancho que el ancho del dispositivo, Chrome permite alejar y cargar la página con el nivel de zoom mínimo, pero esto no cambia el ancho / alto del diseño, por lo que el 100% solo llena los píxeles del device-width/aspect ratio , lo que no No llene la ventana ampliada.

La forma correcta de solucionar este problema es asegurarse de que todo el contenido esté contenido en el tamaño del diseño. En su caso, la razón por la que sub_container_div es más ancho que el tamaño del diseño es que su relleno / márgenes hacen que se expanda fuera del padre. La solución es agregar box-sizing: border-box a los elementos sub_container_div y dialog y width: 100% a sub_container_div. De esa manera, Chrome no puede alejarse y no se puede ver fuera del cuadro de diseño (en el lenguaje de especificaciones HTML, ese es el bloque de contención inicial).