El "Calc (100%)"Es una función utilizada en CSS para aplicar ciertas propiedades a los elementos HTML de acuerdo con las instrucciones matemáticas dadas dentro de la función. Similarmente, "Altura: Calc (100%)"Se usa para establecer la altura de un determinado elemento. A veces, esta función no se ejecuta y no tiene impacto en la salida a pesar de su presencia en el elemento de estilo CSS.

El error más común al escribir el Calc (100%) La función para cualquier propiedad (como altura o ancho) es la falta "posición"Propiedad para el elemento, cuya altura debe cambiarse. Esto se resuelve simplemente agregando un "posición"Propiedad al elemento de estilo.

Ejemplo: Calc (100%) no funciona
Discutamos este problema con la ayuda de un ejemplo simple en el que falte una propiedad de posición y veamos la salida:

Altura: función Calc (100%)

Esta es la caja, la altura de la cual debe cambiarse a través de la altura: Función Calc (100%)

En el fragmento de código anterior, hay un

encabezado que dice "Función Calc (100%),"Y luego hay un contenedor Div con una declaración aleatoria simple.

Agreguemos el elemento de estilo CSS que se refiere a los elementos HTML anteriores y los diseñe:

.calc
Ancho: Calc (100% - 390px);
borde: 1px negro sólido;
Color de fondo: RGB (63, 218, 197);
Text-Align: Center;
Altura: Calc (100% - 350px);

En el fragmento de código anterior, hay algunas otras propiedades para diseñar el elemento HTML (encabezado y contenido de clase Div) como el borde, el color de fondo, la alineación de texto. Entonces, ahí está el "Altura: Calc (100% - 350px);".

La siguiente será la salida del código anterior:

No podemos ver ningún cambio en la altura del elemento div. Significa que la altura: la propiedad Calc (100%) no funciona.

Forma correcta de agregar altura: función calc (100%)

Ahora, si agregamos la propiedad de posición en el elemento de estilo, el código funcionará correctamente:

.calc
Posición: Absoluto;
Ancho: Calc (100% - 390px);
borde: 1px negro sólido;
Color de fondo: RGB (63, 218, 197);
Text-Align: Center;
Altura: Calc (100% - 350px);

En el fragmento de código anterior, simplemente agregamos una propiedad de posición y la siguiente será la salida después de agregar la propiedad de posición:

De la salida anterior, podemos comprender claramente la diferencia entre la salida generada a través del código que tiene la propiedad de posición y la que carece de la propiedad de posición. Así es como hacemos la altura: Calc (100%) funciona correctamente.

Conclusión

El error más común al escribir la función de calc (100%) para la altura es probablemente una propiedad de posición faltante que lidera la altura: Calc (100%) para no tener ningún impacto en la salida. Esto se resuelve fácilmente simplemente agregando la propiedad de posición en el mismo elemento de estilo CSS que donde se ha agregado la función calc (100%) para la propiedad de altura.