Diferencia entre la altura CSS Top 100% vs altura Auto

"Altura: 100%"Establece la altura de los contenedores Div Div de acuerdo con la del contenedor principal. Este valor de propiedad establece la altura del niño exactamente igual a la altura definida en el elemento principal. Pero cuando "Altura: Auto"Se usa para un elemento, establecerá la altura de su valor de elementos infantiles en lugar de heredar el valor del elemento principal.

Este blog diferenciará entre CSS "Altura: 100%" y "Altura: Auto".

¿Cómo funciona "altura: 100%" en HTML??

Definir cualquier número de porcentajes ya que la altura del elemento infantil ajustará la altura en consecuencia. Entonces, una altura del 100% establecerá la altura del elemento infantil de tal manera que cubra completamente el área del elemento principal. Por ejemplo, establecer el "altura"Del elemento infantil a"50%”(Altura: 50%) establecerá la altura del elemento infantil como la mitad de su elemento principal.

Ejemplo: Aplicación de propiedad "Altura: 100%" a una imagen
Comprendamos la aplicación de la altura: 100% en un código HTML:

En el fragmento de código anterior:

• Para el elemento div, el valor de la propiedad de la altura de CSS se define como "200px".
• Dentro del div, hay un "imgEl elemento establecido como el elemento infantil del elemento contenedor Div anterior. Su altura está establecida en "100%"(Altura: 100%). Esto significa que la altura de la imagen se establecerá de acuerdo con el valor de píxel definido en el contenedor Div principal, I.mi., "200px".

Esto generará la siguiente salida:

Ahora, si cambiamos el valor de la propiedad de altura en el elemento Div principal (por ejemplo, de 200px a 300px), establecerá el tamaño de la imagen en "300px":

Esto cambiará la altura de la imagen a "300px"Y la imagen se mostrará así:

¿Cómo funciona la propiedad "Altura: Auto" en HTML??

El "Altura: Auto"La propiedad establece la altura del elemento infantil al valor definido en ese elemento infantil. Por ejemplo, si hay un elemento principal que tiene la altura "300px"Y tiene un elemento infantil con" Altura: Auto ". Luego, dentro de ese elemento (que contiene "Altura: Auto"), todos los elementos infantiles tendrán la altura de acuerdo con la definición. Más específicamente, el elemento infantil no heredará el valor del elemento principal.

Ejemplo: Aplicación de la propiedad "Altura: Auto" a una imagen
Entendamos esto con un simple ejemplo de fragmento de código HTML:

En el fragmento de código anterior:

• Aquí, hemos agregado un elemento de contenedor Div con el atributo de estilo y la propiedad CSS en línea como "Altura: 300px".
• Dentro del elemento del contenedor Div, hay otro contenedor Div con la propiedad de estilo CSS establecida como "auto".
• Dentro del segundo elemento div, un "imgSe agrega elemento (hijo del elemento div) anterior). Tiene el atributo de estilo con la propiedad de altura con el valor establecido en "250px".
• Esto significa que la altura de la imagen se establecerá en "250px" porque su elemento principal tiene "Altura: Auto".

Producción

Ahora, si cambiamos el valor del "alturaPropiedad del niño Div, también cambiará la altura de la imagen en la salida en consecuencia:

Esto establecerá la altura de la imagen como "150px"En la salida:

Esto resume la diferencia entre CSS "Altura: 100%"Vs"Altura: Auto".

Conclusión

El CSS "Altura: 100%"Establece la altura del elemento exactamente como la definida en su elemento principal. Por otro lado, cuando el "Altura: Auto"Se usa en un elemento, establece la altura de sus elementos infantiles como se define en los elementos infantiles y no hereda la altura del elemento principal. Esta publicación discutió la diferencia entre CSS "Altura: 100%" y la "Altura: Auto".