Search code examples
csscss-calc

CSS Operations with calc()

I have been working with the calc() CSS property and I have one doubt about it:

.main {
  display: block;
  margin-left: 4rem;
  width: (100% - nav);
  background: red;
}
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 4rem;
  height: 100vh;
  background: #292929;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

Like you see in the code I'm trying to subtract 100% - The nav WIDTH that it is in rem for the responsive mode, but obviously it doesn't work, is there any way to do this?

Solution

  • you can't use selectors in calc() as argument, if you want to subtract the nav's width then subtract nav's width already set:

    .main {
  width: calc(100% - 4rem);
  /* mores styles */
}

    The calc() CSS function can be used anywhere a <length>, <frequency>, <angle>, <time>, <number>, or <integer> is required.

    .....

    Expressions

    The expression can be any simple expression combining the following operators, using standard operator precedence rules:

    + Addition.

    - Subtraction.

    * Multiplication. At least one of the arguments must be a <number>.

    / Division. The right-hand side must be a <number>.

    The operands in the expression may be any length syntax value. You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.