我一直在使用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 中用于响应模式，但显然它不起作用，有什么办法吗这个？
【问题讨论】：
你不能在calc()中使用选择器作为参数，如果你想减去nav的width然后减去nav的width已经设置好了：
.main {
width: calc(100% - 4rem);
/* mores styles */
}
calc()CSS 函数可用于<length>、<frequency>、<angle>、<time>、<number>或<integer>为必填项。.....
表达式
表达式可以是任何简单的表达式，结合以下 运算符，使用标准运算符优先级规则：
+加法。
-减法。
*乘法。至少有一个参数必须是<number>。
/分配。右侧必须是<number>。表达式中的操作数可以是任意长度的语法值。你可以 如果您愿意，可以为表达式中的每个值使用不同的单位。 您也可以使用括号来建立计算顺序 需要。
【讨论】：
css 和calc 到css-calc 的所有内容的详尽重新标记。版主目前正在讨论这是一个好主意还是坏主意，请暂时推迟任何进一步的重新标记。
css，只标记calc，因为我认为网站中的css-calc 功能存在差距，如果我操作错误，请见谅。
:)
calc 的问题，而不仅仅是偶然碰巧涉及使用 calc 的一般 CSS 问题。
我想我会看看 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>【讨论】：
不幸的是，它不是那样工作的。它需要是预定值，例如“10px”或“3rem”。
但是你可以这样做：
.main {
/* ... */
width: calc(100% - 4rem);
}
【讨论】：
你不能减去整个元素（导航），它必须是精确值：
<length>, <frequency>, <angle>, <time>, <number>, or <integer>
如果你想这样做，考虑使用像 Sass 这样的预处理器，你可以添加新变量并使其等于某个宽度值。你可以减去你的宽度和这个变量。
萨斯方式：
$nav-width: 10px;
.main {
display: block;
margin-left: 4rem;
width: (100% - $nav-width);
background: red;
}
【讨论】：