Altura CSS Calc; VS altura superior 100 VH;

Hay "NO"Gran diferencia en los resultados y la ejecución de las propiedades CSS"Altura: Calc (100VH);" y "Altura: 100 VH;". La única diferencia es que se han escrito de diferentes maneras. De lo contrario, la funcionalidad de la "altura: calc (100vh);" Las proporcionadas son lo mismo que el proporcionado por la "altura: 100VH"; y viceversa.

Entendamos esto prácticamente aplicando ambas propiedades una por una por separado.

Cómo aplicar "Altura: 100VH"; Propiedad en HTML?

Aplicemos el "Altura: 100 VH;"Propiedad a un elemento HTML creando primero un elemento de contenedor DIV con una ID asignada y luego agregando el selector de ID para aplicar la propiedad" Altura: 100VH "a un elemento de contenedor DIV:

Este div tiene la altura que cubre la pantalla completa/el punto de vista


La propiedad utilizada en esta es la altura: 100VH;

En el fragmento de código HTML anterior:

• A ""El elemento contenedor se agrega con el"identificación"Declarado como"mydiv".
• Dentro del elemento del contenedor Div, defina algún texto y especifique el contenedor "".

Ahora, se requiere agregar el "identificación"Selector se refiere al elemento HTML agregado anteriormente:

#mydiv
borde: 3px negro sólido;
Color de fondo: PowderBlue;
relleno: 7px;
Ancho: 200px;
Text-Align: Center;
Altura: 100 VH;

El elemento de estilo CSS tiene el "identificación"Selector que tiene algunas propiedades CSS dentro:

• El "borde"La propiedad crea un color negro"3pxBorder para el contenedor Div.
• El "relleno"La propiedad define el espacio entre el borde del Div y el contenido dentro del Div como"7px".
• El "ancho"La propiedad define el ancho o la longitud horizontal del contenedor.
• El "texto alineado"La propiedad alinea el contenido Div (texto dentro del div) al centro del contenedor Div.
• El "Altura: 100 VH"La propiedad define la altura o la longitud vertical del contenedor DIV a" 100 altura de la ventana gráfica ". Esta es la propiedad CSS principal que se aplicará al elemento HTML aquí.

Como resultado, la altura del elemento se define desde la parte superior hasta la parte inferior que cubre toda el área vertical de la pantalla:

Cómo aplicar "Altura: Calc (100VH);" Propiedad en HTML?

Ahora, si aplicamos el "Altura: Calc (100 VH)Propiedad al mismo fragmento de código HTML como se agregó anteriormente como el siguiente:

Este div tiene la altura que cubre la pantalla completa/el punto de vista


La propiedad utilizada en esto es altura: Calc (100VH);

En el elemento de estilo CSS, la única diferencia será la del "altura"Propiedad que ahora se define como"Calc (100 VH)". Los puntos dentro del "#mydiv"El selector se refiere a las mismas propiedades que se aplican en la sección anterior:

#mydiv

Altura: Calc (100VH);
…

Se puede observar que no hay diferencia en el resultado producido por este valor, si se compara con la otra propiedad (altura: 100VH):

Esto resume la funcionalidad de ambos CSS "Altura: 100 VH" y "Altura: Calc (100 VH)" propiedades.

Conclusión

No hay diferencia en la ejecución y los resultados del "Altura: 100 VH" y "Altura: Calc (100 VH)"Propiedades CSS. Cuando cualquiera de estas propiedades se aplica al elemento de estilo CSS, hace que el elemento HTML cubra toda el área vertical de la pantalla de acuerdo con su longitud horizontal. Este artículo explicó el procedimiento para aplicar los valores de propiedad de la altura establecida.