Supuse hasta ahora que por defecto, de acuerdo con el comportamiento normal del diseño, el <body> Elemento relleno 100% de la altura del contenedor. <html> elemento incluso cuando position: static se estableció.
Sin embargo, un simple experimento demostró que mi suposición era errónea y me sorprendió.
Entiendo que en el comportamiento de diseño normal, los elementos de bloque "las alturas son elásticas y se estiran para llenar todo su contenido. Sin embargo, por alguna razón, pensé que esto no se aplicaba a la <body> elemento.
Entonces, en mi experimento simple, tengo el siguiente HTML:
html {
background-color: white;
}
body {
width: 50%;
background-color: gray;
margin: 0 auto;
min-height: 100%;
height: 100%;
/* position: absolute;
left: 22%; */
}<h1>Nice sounds</h1>
<p>Zoo zoo zoo</p>
<p>Koo koo koo</p>
<p>Boo boo boo</p>
<p>Poo poo poo</p>Si dejo el position: absolute; comentado tal como está ahora, luego, por defecto, en el diseño estático, el cuerpo se comporta como cualquier otro elemento de bloque y es tan alto como para llenar su contenido, ignorando las reglas height: 100%; y min-height: 100%. Se parece a la imagen de abajo.
Sin embargo, si cambio el posicionamiento a absolute, es decir, si descomprimo lo siguiente:
position: absolute;
left: 22%;
Entonces, por supuesto, obedece a la height: 100%; min-height: 100% reglas. Luego llena toda la altura del navegador de esta manera:
¿Es este el comportamiento normal? Hace el <body> el elemento se comporta como cualquier otro elemento de bloque con respecto a sus reglas de diseño, esp. ¿Con respecto a su altura?
Respuestas
2 para la respuesta № 1TL; DR: Sí, este es el comportamiento normal.
Sin embargo.
Érase una vez, existía un estándar más antiguo en el que el cuerpo tenía la altura de la ventana gráfica de forma predeterminada. Hace mucho tiempo.
Además, algunas características oscuras de HTML pueden confundir las cosas. Si no configura el background-color propiedad de la html elemento, el fondo de body será "heredado" por html, para que toda la ventana tenga este fondo, haciendo que parezca que el cuerpo ocupa toda la ventana, ¡lo cual no es así!
0 para la respuesta № 2
Cuando está estática tiene un padre que es html y cuando se usa posicionamiento estático en ese caso, se piensa dentro del padre. html por defecto como cualquier otro bloque tiene height: auto así que si cambias eso al 100% se convierte en lo que esperabas.
body tiene un padre html y construir sus tamaños de acuerdo a su padre.