Original article: HTML vs Body: How to Set Width and Height for Full Page Size
El CSS es complejo, pero también puede ser flexible, y es esto mismo lo que nos permite arrojar estilos sin mucho cuidado en nuestros archivos CSS.
Nuestra página aún carga. No hay "crashes".
Cuando hablamos del ancho y el alto de una página, ¿sabes qué es lo que se debe configurar en el elemento HTML? ¿Qué hay del elemento body?
¿Simplemente colocas algunos estilos en ambos elementos y esperas que resulte de la mejor manera?
Si lo haces, no eres la única persona en esta situación.
Las respuestas a esas preguntas no son intuitivas.
Soy 100% culpable de emplear estilos en ambos elementos en el pasado, sin considerar de forma apropiada cuál es la propiedad que debería ser aplicada a cada elemento. ?♂️
No es raro ver propiedades de CSS aplicadas tanto al elemento HTML como al body, de esta forma:
html, body {
min-height: 100%;
}
¿Esto importa?
Sí, importa.
La definición vista más arriba crea un problema:
Configurar el min-height en 100% en ambos elementos no permite que el elemento body ocupe toda la página como se podría esperar. Si se chequean los valores de estilo luego de la ejecución con las herramientas de desarrollo, el elemento body tiene un alto de cero.
Mientras, el elemento HTML tiene una altura igual a la parte visible de la página en el navegador.
Mira la siguiente captura de pantalla desde los Chrome Dev Tools:
¿Por qué sucede esto?
Utilizar un porcentaje como valor para un tamaño requiere que el elemento referencie a un padre sobre el cual basar la proporción.
El elemento HTML referencia al viewport que tiene una altura igual a su parte visible. Sin embargo, solo configuramos el min-height al elemento HTML... NO un valor de altura.
Entonces, el elemento body no tiene un valor de altura de un padre para referenciar al calcular a qué debería ser igual el 100%.
Y el problema puede estar escondido
Si has comenzado con suficiente contenido para completar el body de la página, quizás no hayas notado este problema.
Y para hacerlo aún más difícil de notar, si se configura un background-color en ambos elementos o inclusive solo en uno de ellos, el viewport tomará ese color. Esto da la impresión de que el elemento body es tan alto como el viewport.
No lo es. Su altura aún es cero.
La imagen de más arriba fue tomada de una página con el siguiente código CSS:
html, body {
min-height: 100%;
}
body { background-color: dodgerblue; }
¿Herencia a la inversa?
En un giro extraño, el elemento HTML asume el background-color del elemento body si no se configura un background-color por separado para el mismo.
¿Entonces cuál es el alto ideal para una página responsiva?
Durante años, la respuesta fue la siguiente:
html {
height: 100%;
}
body {
min-height: 100%;
}
Esto permite que el elemento HTML referencie al viewport padre y tenga un valor de altura igual al 100% del valor del viewport.
Con el elemento HTML recibiendo un valor de altura, el min-height asignado al elemento body le da una altura inicial que coincide con el del elemento padre.
Esto permite que el body pueda crecer en altura si el contenido es mayor a la zona visible de la página.
La única desventaja de esto es que el elemento HTML no puede crecer más allá del alto del espacio visible del viewport. Sin embargo, permitir que el elemento body pueda ir más allá del elemento HTML se ha considerado una práctica aceptable.
La solución moderna se ha simplificado
body { min-height: 100vh; }
Este ejemplo utiliza unidades vh (alto del viewport) para permitir que el body configure un alto mínimo en base al alto total del viewport.
Como se ha mencionado previamente respecto al background-color, si no se configura un valor de altura para el elemento HTML, este asumirá que el valor es aquel que se le otorga al elemento body.
Por lo tanto, esta solución evita que el elemento body se extienda por demás como en la solución anterior y ¡ambos elementos crecerán con el contenido!
El uso de unidades vh ha causado algunos inconvenientes en navegadores en dispositivos móviles, pero parece que Chrome y Safari ahora manejan estas unidades de forma consistente.
El alto de página puede causar que aparezca una barra de desplazamiento horizontal
Esperen, ¿qué?
¿No debería esto decir "ancho de página"?
No.
En otra serie extraña de eventos, el alto de página puede activar la aparición de la barra de desplazamiento horizontal en el navegador.
Cuando el contenido de la página es más extenso que la altura del viewport, se activa la barra de desplazamiento vertical a la derecha. Esto puede causar que la página automáticamente también obtenga una barra de desplazamiento horizontal.
Entonces, ¿cuál es la solución?
Quizás puedas dormir mejor sabiendo que comienza con la configuración del ancho de página.
Este problema aparece cuando cualquier elemento - no solo el de HTML o el body - se configura en 100vw (ancho de viewport).
Las unidades de viewport no tienen en cuenta los 10 pixeles (aproximadamente) que toma la barra de desplazamiento vertical.
En consecuencia, cuando se activa la barra de desplazamiento vertical, también aparece la horizontal.
¿Cómo configurar la página para tomar el ancho completo?
Quizás no se deba hacer.
El no establecer un ancho en los elementos HTML y body provoca que los mismos tomen por defecto el tamaño total de la pantalla. Si estableces un ancho distinto a auto, considera utilizar una regla CSS para configurar los valores iniciales primero.
Recuerda, por defecto, el elemento body tiene un margen de 8px en todos sus lados.
Una regla de CSS para establecer los valores iniciales puede remover esto. De otra forma, el configurar el ancho en 100% antes de quitar los márgenes puede ocasionar que el elemento body se desborde. Aquí está la regla CSS que utilizo:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Cómo establecer el ancho a tu preferencia
Aunque no siempre sea necesario establecer un ancho, en general lo hago.
Quizás solo sea un hábito.
Si estableces un ancho de 100% en el elemento, body obtendrás una página que tome el ancho total. Esto es prácticamente lo mismo que no configurar un ancho y dejar que simplemente se tome el valor por defecto.
Si quieres utilizar el elemento body como un contenedor más pequeño y dejar que el elemento HTML rellene la página, podrías configurar un valor de max-width en el body.
Aquí hay un ejemplo:
html { background-color: #000; }
body {
min-height: 100vh;
max-width: 400px;
background-color: papayawhip;
margin: 0 auto;
}Conclusión
Cuando no se provee un valor de altura para el elemento HTML, configurar un alto y/o min-height en el elemento body a 100% da como resultado una altura cero (antes de que agregues contenido).
Sin embargo, cuando no se provee un valor de ancho al elemento HTML, configurar el mismo del elemento body a 100% resulta en una página que toma el ancho completo.
Esto puede ser poco intuitivo y confuso.
Para crear una página que ocupe el alto completo y que sea responsiva, configura el min-height del elemento body en 100vh.
Si estableces un ancho de página, elige 100% por sobre 100vw para evitar la aparición sorpresa de barras de desplazamiento horizontales.
Te dejaré con un tutorial de mi canal de YouTube que muestra las configuraciones de alto y ancho en CSS para una página HTML que ocupa todo el tamaño de pantalla y se adapta a su contenido:
¿Tienes alguna otra forma de establecer el alto y el ancho por medio de CSS que sea de tu preferencia?
¡Comparte tu método!