css - 使用 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%的导航，但显然它不起作用，有没有办法做到这一点？WIDTHrem

Answer 1

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

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

---

calc()CSS 函数可以在任何需要<length>, <frequency>, <angle>, <time>,<number>或的地方<integer>使用。

......

表达式

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

+ 添加。

- 减法。

* 乘法。至少有一个参数必须是 a <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

您不能减去整个元素（导航），它必须是精确值：

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

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

萨斯方式：

$nav-width: 10px;

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

Answer 4

不幸的是，它不是那样工作的。它需要是预定值，例如“10px”或“3rem”。

但是，您可以这样做：

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