使用 calc() 的 CSS 操作

Question

我一直在使用 calc() CSS 属性，我对此有一个疑问:

.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);
}

就像您在代码中看到的那样，我正在尝试减去 100% - 导航 WIDTH 它在 rem 中用于响应模式，但显然它不起作用，有什么办法可以做到这一点？

Answer 1

您不能在 calc() 中使用选择器作为参数，如果你想减去 nav的 width然后减去 nav的 width已经设置:

.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.