O "Calc (100%)”É uma função usada no CSS para aplicar certas propriedades a elementos HTML de acordo com as instruções matemáticas fornecidas dentro da função. De forma similar, "Altura: Calc (100%)”É usado para definir a altura de um certo elemento. Às vezes, essa função não é executada e não tem impacto na saída, apesar de sua presença no elemento de estilo CSS.

O erro mais comum ao escrever o Calc (100%) A função para qualquer propriedade (como altura ou largura) está ausente “posição”Propriedade do elemento, cuja altura deve ser alterada. Isso é resolvido simplesmente adicionando um “posição”Propriedade do elemento de estilo.

Exemplo: Calc (100%) não está funcionando
Vamos discutir esse problema com a ajuda de um exemplo simples em que há uma propriedade de posição ausente e ver a saída:

Altura: Função de Calc (100%)

Esta é a caixa, da qual a altura deve ser alterada através da altura: Calc (100%) função

No trecho de código acima, há um

cabeçalho que diz “Função de Calc (100%),”E então há um contêiner de div com uma declaração aleatória simples.

Vamos adicionar o elemento de estilo CSS que se refere aos elementos HTML acima e estilizá -los:

.calc
largura: calc (100% - 390px);
borda: 1px preto sólido;
Background-Color: RGB (63, 218, 197);
Alinhamento de texto: centro;
Altura: Calc (100% - 350px);

No trecho de código acima, existem outras propriedades para estilizar o elemento HTML (título e conteúdo da classe DIV), como borda, cor de fundo, alinhamento de texto. Então, há o “Altura: Calc (100% - 350px);”.

O seguinte será a saída do código acima:

Não podemos ver nenhuma mudança na altura do elemento div. Isso significa que a propriedade da altura: calc (100%) não está funcionando.

Maneira correta de adicionar altura: Função de Calc (100%)

Agora, se adicionarmos a propriedade de posição no elemento de estilo, o código funcionará corretamente:

.calc
Posição: Absoluto;
largura: calc (100% - 390px);
borda: 1px preto sólido;
Background-Color: RGB (63, 218, 197);
Alinhamento de texto: centro;
Altura: Calc (100% - 350px);

No trecho de código acima, basta adicionar uma propriedade de posição e o seguinte será a saída após adicionar a propriedade de posição:

A partir da saída acima, podemos entender claramente a diferença entre a saída gerada através do código que possui a propriedade de posição e o que não possui a propriedade de posição. É assim que fazemos a altura: calc (100%) funcionar corretamente.

Conclusão

O erro mais comum ao escrever a função calc (100%) para a altura é provavelmente uma propriedade de posição ausente que leva a altura: calc (100%) para não ter nenhum impacto na saída. Isso é resolvido facilmente apenas adicionando a propriedade de posição no mesmo elemento de estilo CSS que a função CALC (100%) para a propriedade de altura foi adicionada.