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的响应模式，但很明显它没有＃39}工作，有没有办法做到这一点？

Answer 1

如果你想减去nav＆＃39; width然后减去nav＆＃，你就不能在calc()中使用选择器作为参数39; s width已设置：

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

calc() CSS功能可用于<length>，<frequency>的任何位置，   需要<angle>，<time>，<number>或<integer>。

.....

<强>表达式

表达式可以是组合以下内容的任何简单表达式   运算符，使用标准运算符优先级规则：

+       此外。

-       减法。

*       乘法。至少有一个参数必须是<number>。

/       师。右侧必须是<number>。

表达式中的操作数可以是任何长度的语法值。您可以   如果您愿意，可以为表达式中的每个值使用不同的单位。   您也可以使用括号来建立计算顺序   需要的。

Answer 2

我想我会看到CSS变量是否可以工作，它似乎适用于Chrome（但不是Edge）。我非常确定兼容性问题可能会使得这个答案在浏览器支持增加之前无法接受，但我想将其添加到未来的访问者或个人项目中：

:root {
  --nav-width: 5em;
}

nav {
  background: red;
  width: var(--nav-width);
  height: 1em;
}

div {
  background: blue;
  width: calc(100% - var(--nav-width));
  margin-left: var(--nav-width);
  height: 1em;
}

<nav></nav>
<div></div>

Answer 3

不幸的是，它并没有这样做。它需要是一个预定的值，如＆＃34; 10px＆＃34;或＆＃34; 3rem＆＃34;。

但是你可以这样做：

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

Answer 4

你不能减去整个元素（nav），它必须是精确值：

<length>, <frequency>, <angle>, <time>, <number>, or <integer>

如果你想这样做，可以考虑使用像Sass这样的预处理器，你可以添加新变量并使其等于某个宽度值。您可以减去宽度和此变量。

Sass方式：

$nav-width: 10px;

.main {
display: block;
margin-left: 4rem;
width: (100% - $nav-width);
background: red;
}

使用calc（）的CSS操作

4 个答案: