CSS es difícil pero también es permisivo, esto nos permite introducir estilo al azar en nuestro CSS. La página todavía carga y no hay "accidentes".
Cuando se trata del ancho y el alto de la página ¿Sabes qué configurar del elemento html? ¿Y del elemento body? ¿Simplemente colocas los estilos en ambos elementos y esperas lo mejor? Si lo haces, no estás solo.
Las respuestas a esas preguntas no son intuitivas, Soy culpable de aplicar estilos a ambos elementos en el pasado sin considerar exactamente cuál propiedad debe ser aplicada a qué elemento ?. No es raro ver las propiedades CSS aplicadas tanto al elemento html como al elemento body de la siguiente manera:
html, body {
min-height: 100%;
}
¿Acaso importa?
Si, si importa.
La definición de estilos anterior crea un problema:
Establece la altura mínima al 100% en ambos elementos, y esto no permite que el bodyllene la página como se esperaría. Cuando verificamos los estilos en las herramientas del desarrollador, el body tiene una altura cero. Mientras tanto, el elemento html tiene una altura igual a la parte visible de la página del navegador.
Miremos la siguiente captura de pantalla de herramientas del desarrollador de Chrome:
El body tiene por defecto un margen de 8px indicado por la barra en la parte superior, pero la altura tiene de valor 0.
¿Por qué esto ocurre?
El uso de un porcentaje como tamaño necesita usar como referencia el elemento padre en el que basar el porcentaje. El elemento html hace referencia a la ventana gráfica que tiene un valor de altura igual a la altura de la ventana gráfica visible. Sin embargo, nosotros solo establecemos el min-value del elemento html... NO un valor a la propiedad height. Por lo tanto, el elemento bodyno tiene un elemento padre al que hacer referencia cuando establece la propiedad igual al 100%.
El problema puede estar oculto
Si comenzamos con suficiente contenido para el cuerpo de la página web, es posible que no notemos el problema. Y para hacerlo más difícil de observar, si establecemos background-color en ambos elementos o incluso en uno solo de ellos, la ventana gráfica estará llena de ese color. Esto da la impresión que el elemento body es tan grande como la ventana gráfica. Pero no, todavía está en cero.
La imagen anterior fue tomada de una página con el siguiente CSS:
html, body {
min-height: 100%;
}
body { background-color: dodgerblue; }
¿Herencia inversa?
En un giro extraño, el elemento htmlasume el background-colordel elemento bodysi no se establece un background-color separado para el elemento html.
Entonces, ¿cuál es la configuración de altura ideal para una página full responsive?
Por años, la respuesta fue la siguiente:
html {
height: 100%;
}
body {
min-height: 100%;
}
Esto permite al elemento html hacer referencia a la ventana gráfica y tenga un valor de altura igual al 100%. 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 elemento html. Esto también permite que el bodycrezca más alto si el contenido supera el tamaño de lo visible de la página.
El único inconveniente es que el elemento html no crezca más allá de la altura de la ventana gráfica visible. Sin embargo, se ha permitido que el elemento bodysupere el elemento html.
La solución actual está simplificada
body { min-height: 100vh; }
En este ejemplo usamos como unidad vh(altura de la ventana gráfica) para permitir que el body establezca una altura mínima basada en la altura completa de la ventana gráfica.
Al igual que la discusión anterior de background-color, si nosotros no seteamos el valor de la altura máxima del elemento html, asumirá el mismo valor de la altura del elemento body.
Por lo tanto, esta solución evita el desbordamiento del elemento htmlpresente en la solución anterior y ambos elementos crecen con su contenido.
El uso de la unidad vh causó algunos problemas con el navegador móvil en el pasado, pero parece que Chrome y Safary son consistentes con las unidades de visualización ahora.
Tamaño de página puede causar un scroll horizontal
Espera... ¿qué? ¿No debería decir "Ancho de página?
¡No!
En otra extraña serie de eventos, la altura de tu página puede activar el scroll horizontal en tu navegador. Cuando el contenido de tu página web es más alto que la altura de la ventana gráfica, se activa la barra del scroll vertical a la derecha. Esto puede causar que tu página tenga instantáneamente una barra de scroll horizontal.
¿Cómo podemos solucionar esté problema?
Podemos dormir mejor sabiendo que comenzamos con una configuración del ancho de la página. Este problema surge cuando cualquier elemento, no solo los elementos html o body- se establecen con 100vw (ancho de la ventana gráfica).
Las unidades de la ventana gráfica no tienen en cuenta los 10 píxeles aproximados que ocupa la barra de desplazamiento vertical. Por lo tanto, cuando se activa la barra de desplazamiento vertical, también se obtiene una barra de desplazamiento horizontal.
¿Cómo configuramos la página para el tamaño completo?
Si no establecemos un ancho en los elementos htmly body, el tamaño predeterminado de la pantalla será el tamaño completo de la pantalla. Si establecemos un valor de ancho que no sea automático, consideremos restablecer primero el CSS. Recordemos, por defecto el elemento bodytiene 8 píxeles de margen en todos los lados.
Reestablecer el CSS elimina esto. De lo contrario, establecer el ancho al 100% antes de eliminar los márgenes hará que el elemento del body desborde. Aquí está el restablecimiento de CSS que uso:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
¿Cómo establecemos el ancho de nuestra preferencia?
Si bien puede que no siempre sea necesario establecer un ancho, generalmente lo hago. Puede ser simplemente un hábito.
Si establecemos el ancho al 100% en el elemento body, tendrá un ancho de página completo. Esto es equivalente a no establecer un valor de ancho y permitir el valor predeterminado.
Si deseamos utilizar el elemento del body como un contenedor más pequeño y dejar que el elemento HTML llene la página, podemos establecer un valor de ancho máximo en el body.
Aquí un ejemplo:
html { background-color: #000; }
body {
min-height: 100vh;
max-width: 400px;
background-color: papayawhip;
margin: 0 auto;
}
Conclusión
Sin una altura proporcionada para el elemento html, establecer height y/o min-height del elemento body no da como resultado la altura (antes de agregar el contenido). Sin embargo, sin un ancho para el elemento html, establecer el ancho del elemento body en 100% da como resultado el ancho de la página completa. Esto puede parecer contra intuitivo y confuso.
Para una página responsive, establezca el min-height del elemento body en 100vh. Si estableces el ancho de página, elije el 100% sobre 100vw para evitar el scroll horizontal.
Les dejo un tutorial de mi canal de YouTube demostrando como configurar el ancho y el alto para una página web que crece con el contenido que contiene:
HTML Page Width and Height Settings | CSS Full Screen Size
¿Tienes una manera diferente de establecer el ancho y el alto que te guste más?
¡Dejame saber tu método!
Traduccion del articulo - HTML vs Body: How to Set Width and Height for Full Page Size por Dave Gray