Estoy trabajando en un proyecto en el que el antiguo desarrollador utilizó:
.main-sidebar {
height: calc(100vh);
}
Ya no tengo forma de contactarlo, y me gustaría entender cuál es la diferencia (si la hay) entre los dos métodos.
(¿Es este el lugar correcto para hacer esta pregunta?)
anukul limpanasil
VH
height: 100vh; significa que la altura de este elemento es igual al 100% de la altura de la ventana gráfica.
ejemplo:
height: 50vh;
Si la altura de su pantalla es de 1000 px, la altura de su elemento será igual a 500 px (50 % de 1000 px).
CALCULAR
height: calc(100% - 100px); calculará el tamaño del elemento usando el valor del elemento.
ejemplo:
height: calc(100% - 100px);
Si la altura de su pantalla es de 1000 px, la altura de su elemento será igual a 900 px (100 % de 1000 px y menos 100 px).
*Creo que su desarrollador anterior no necesitaba usar calc() si él / ella no quería calcular el valor.
No hay diferencia, ya que en cualquier momento la expresión calc(100vh) se calcula, siempre termina siendo 100vh.
Maulik Pipaliya Joyy
La función CSS calc() le permite realizar cálculos al especificar valores de propiedad CSS
es posible que desee referir esto
Camino
(La razón por la que el desarrollador anterior usó esto puede ser que lo usa convencionalmente en todas partes y sería más fácil agregar cálculos después)
-
Apuesto a que el valor original era algo así como calc (100vh – 60px), luego eliminó -60px
– Russell
27 de julio de 2020 a las 16:20
-
Totalmente de acuerdo Russell. ¡Lo más probable es que ese debería haber sido el caso! :pag
– Maulik Pipaliya Joyy
31 de julio de 2020 a las 3:11
-
1+ por proporcionar un enlace a un ejemplo que aclara las cosas.
– Jakob
16 de noviembre de 2021 a las 12:47
Básicamente, la función calc () permite expresiones matemáticas con suma (+), resta (-), multiplicación
y la división (/) que se utilizará como valores de componentes.
Ahora, en su caso, ambos son iguales ya que no ha utilizado ningún cálculo. Entonces puedes usar la altura: 100vh
-
Un caso de uso común es que al principio restaba el encabezado o cualquier otro elemento. calc(100vh – 80px).
Entonces, ¿está diciendo que esto fue un caso de negligencia al eliminar “- 80px” pero no la expresión calc() completa?
– BoltClock
-
23 de octubre de 2018 a las 5:07
Estoy de acuerdo con @”Dragomir Dan”
– Russell
Avatar de usuario de Elikill58
calc() elikill58
solo se usa para calcular el valor dentro del paréntesis. calc(100vh - 60px);
Ejemplo de altura:
Aquí, la altura será menor en 60 px en la altura de la ventana gráfica.
-
Nota: Recuerde usar espacio antes del operador y después del operador si no está trabajando.
Entonces, ¿está diciendo que esto fue un caso de negligencia al eliminar “- 80px” pero no la expresión calc() completa?
– BoltClock
-
23 de octubre de 2018 a las 5:07
Estoy de acuerdo con @”Dragomir Dan”
– Russell
¿Posible duplicado del uso innecesario de calc () en el ejemplo de MDN? (este no es un ejemplo de MDN pero presenta el mismo uso de calc() con un solo valor)
– BoltClock
23 de octubre de 2018 a las 4:50
“(¿Es este el lugar adecuado para hacer esta pregunta?)” Sí, no te preocupes.
– BoltClock
23 de octubre de 2018 a las 4:51