Diferença entre CSS Altura superior 100% vs altura automática

““Altura: 100%”Define a altura dos recipientes infantis de acordo com a do contêiner pai. Esse valor de propriedade define a altura da criança exatamente igual à altura definida no elemento pai. Mas quando "Altura: Auto”É usado para um elemento, ele definirá a altura do valor dos elementos filhos, em vez de herdar o valor do elemento pai.

Este blog diferenciará entre o CSS “Altura: 100%” e “Altura: Auto”.

Como funciona “Altura: 100%” em HTML?

Definir qualquer número de porcentagens como a altura do elemento filho ajustará a altura de acordo. Portanto, uma altura de 100% definirá a altura do elemento filho de tal maneira que cobre completamente a área do elemento pai. Por exemplo, definindo o “altura"Do elemento infantil para"50%”(Altura: 50%) definirá a altura do elemento filho como metade do seu elemento pai.

Exemplo: Aplicação da propriedade “Altura: 100%” em uma imagem
Vamos entender a aplicação da altura: 100% em um código HTML:

No trecho de código acima:

• Para o elemento div, o valor da propriedade de altura do CSS é definido como “200px”.
• Dentro da div, há um “img”Elemento definido como o elemento filho do elemento de contêiner DIV acima. Sua altura está definida como “100%”(Altura: 100%). Isso significa que a altura da imagem será definida de acordo com o valor do pixel definido no contêiner dos pais, i, i.e., ““200px”.

Isso gerará a seguinte saída:

Agora, se alterarmos o valor da propriedade da altura no elemento Div pai (por exemplo, de 200px para 300px), ele definirá o tamanho da imagem como “300px”:

Isso mudará a altura da imagem para “300px”E a imagem será exibida assim:

Como funciona a propriedade "Altura: Auto" em HTML?

O "Altura: Auto”Propriedade define a altura do elemento filho para o valor definido nesse elemento filho. Por exemplo, se houver um elemento pai que tenha a altura “300px”E tem um elemento filho com“ Altura: Auto ”. Então, dentro desse elemento (contendo “altura: auto”), todos os elementos filhos terão a altura de acordo com a definição. Mais especificamente, o elemento filho não herdará o valor do elemento pai.

Exemplo: Aplicação da propriedade “Altura: Auto” em uma imagem
Vamos entender isso com um exemplo simples de snippet de código HTML:

No trecho de código acima:

• Aqui, adicionamos um elemento de contêiner Div com o atributo de estilo e a propriedade CSS embutida como “Altura: 300px”.
• Dentro do elemento de contêiner Div, há outro contêiner de div com a propriedade do estilo CSS definida como “auto”.
• Dentro do segundo elemento div, um “img”O elemento é adicionado (filho do elemento div acima). Ele tem o atributo de estilo com a propriedade de altura com o valor definido como “250px”.
• Isso significa que a altura da imagem será definida como "250px" porque seu elemento pai tem "altura: auto".

Saída

Agora, se mudarmos o valor do “alturaPropriedade da Div Child, ela também mudará a altura da imagem na saída de acordo:

Isso definirá a altura da imagem como “150px”Na saída:

Isso resume a diferença entre CSS “Altura: 100%"Vs"Altura: Auto”.

Conclusão

O CSS “Altura: 100%”Define a altura do elemento exatamente como o definido em seu elemento pai. Por outro lado, quando o “Altura: Auto”É usado em um elemento, ele define a altura de seus elementos filhos, conforme definido nos elementos filhos e não herda a altura do elemento pai. Este post discutiu a diferença entre o CSS “Altura: 100%” e a “Altura: Auto”.