-1

I want to know what does max-height: calc(( 100vh - 80px) , 560px) actually do and why we have to add space for - to make it work

As i tried if - is without spaces it is not working

I found it is written in css for defining body height like

body{
 max-height: calc(( 100vh - 80px) , 560px);
}
connexo
  • 53,704
  • 14
  • 91
  • 128
Karan Goyal
  • 447
  • 5
  • 10
  • will update the duplicate list to include the max() one but you can easily google it: https://developer.mozilla.org/fr/docs/Web/CSS/max – Temani Afif Jun 10 '20 at 19:58

1 Answers1

3

Your rule

body {
  max-height: calc((100vh - 80px), 560px);
}

as it stands, is invalid CSS because there is no comma-separation of two or more values allowed in the calc argument (invalid number error).

As with regard to your other question, the space surrounding the operator is necessary to differentiate between a signed number/expression and the subtraction operation:

  • The + and - operators must be surrounded by whitespace. For instance,
    calc(50% -8px) will be parsed as a percentage followed by a negative length — an invalid expression — while calc(50% - 8px) is a percentage followed by a subtraction operator and a length. Likewise, calc(8px + -50%) is treated as a length followed by an addition operator and a negative percentage.

  • The * and / operators do not require whitespace, but adding it for consistency is both allowed and recommended.

https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Syntax

connexo
  • 53,704
  • 14
  • 91
  • 128
  • Thanks for you answer i got it what i was missing , i updated my question for which i want to know what is going on? – Karan Goyal Jun 10 '20 at 19:59