The calculation of section height does not work as expected

The navbar should have a height of 90px, and the rest of the screen should have a height of 90vh, however calc("100vh - 90px") doesn’t work.

I can’t see the red section part

here is my html and css code:

html,
body {
  margin: 0;
  padding: 0;
}

.nav-menu {
  background-color: purple;
  height: 90px;
}

.section1 {
  height: calc(~"100vh - 90px");
  background-color: red;
}

<nav class="nav-menu"></nav>
<div class="section1"></div>

I see only the purple navbar

>Solution :

It seems you are mixing less escape sequence ~"..." with regular CSS code. It dictates to use the enclosed string as is and not do any calculations.

height: calc(~"100vh - 90px"); is less code and is not recognized by CSS.
Just change to height: calc(100vh - 90px);

html,
body {
  margin: 0;
  padding: 0;
}

.nav-menu {
  background-color: purple;
  height: 90px;
}

.section1 {
  height: calc(100vh - 90px);
  background-color: red;
}

<nav class="nav-menu"></nav>
<div class="section1"></div>