Este no tiene captura de pantalla. . . . . (Porque lo resumí después de resolver el problema)
La implementación de establecer la altura de los elementos a nivel de bloque en HTML: 100
Cuando estableces la altura de un elemento de página en 100 , se espera que este elemento pueda ocupar toda la altura de la ventana del navegador, pero en su mayor parte no es válido y no tiene ningún efecto.
¿Por qué la altura: 100 no es válida?
Según el sentido común, cuando usamos la propiedad de altura de CSS para definir la altura de un elemento, el elemento debe extender la distancia espacial correspondiente en el espacio vertical del navegador según la configuración. Por ejemplo, si el CSS de un elemento div es height:100px;, entonces debería ocupar una altura de 100px en el espacio vertical de la página. Pero de acuerdo con la especificación w3c, la altura del porcentaje debe establecerse de acuerdo con la altura del contenedor del elemento principal de este elemento. Entonces, si establece la altura de un div en altura: 50 y la altura de su elemento principal es 100 px, entonces la altura del div debe ser 50 px.
Al diseñar la página, colocas un elemento div dentro y quieres que ocupe toda la altura de la ventana. La forma más natural es agregar altura a este div: 100. Propiedades CSS. Sin embargo, si establece el ancho en ancho:100;, el ancho del elemento se expandirá inmediatamente hasta el ancho horizontal completo de la ventana. ¿La altura será así?
Incorrecto
Para entender por qué no, es necesario comprender cómo el navegador calcula la altura y el ancho. Los navegadores web tienen en cuenta el ancho abierto de la ventana del navegador al calcular el ancho efectivo. Si no establece ningún valor predeterminado para el ancho, el navegador automáticamente colocará en mosaico el contenido de la página para llenar todo el ancho horizontal.
Pero la altura se calcula de forma completamente diferente. De hecho, el navegador no calcula la altura del contenido en absoluto, a menos que el contenido exceda la ventana (lo que provoca que aparezcan barras de desplazamiento). O puede establecer una altura absoluta para toda la página; de lo contrario, el navegador simplemente dejará que el contenido se acumule, independientemente de la altura de la página. Debido a que la página no tiene un valor de altura predeterminado, cuando establece la altura de un elemento en un porcentaje, no puede obtener la altura del elemento principal y, naturalmente, no puede calcular su propia altura. En otras palabras, la altura del elemento padre es solo un valor predeterminado: alturaauto. Cuando le pide al navegador que calcule un porcentaje de altura basado en dicho valor predeterminado, solo obtiene resultados indefinidos. Es decir, un valor nulo, el navegador no responderá a este valor.
El elemento padre no tiene una altura fija, por lo que la altura del elemento hijo: 100 no funciona.
Entonces, si quieres que el porcentaje de altura: altura:100 del elemento funcione, debes proporcionarlo.
La altura se establece en un valor.
En otras palabras, ¿es necesario pagarlo? La altura del cuerpo y los elementos html se establece en la altura del div debajo de la altura: 100.
El porcentaje entrará en vigor.