CSS中的calc()用于反向计算宽度不起作用

Question

我有一个元素，希望在其父元素 width 减少时增加它的 width。

公式应该大致如下：

width:calc(150 + 500 / 100%);

但是在Chrome中，每当我尝试用百分比宽度除以属性时，它都会说该属性无效。

这可能吗？（替代 calc()也可以接受）

编辑 我添加了空格（之前不知道），尝试了各种单位，但还没有成功。

Fiddle

<div style="width:100%;position:relative;">
    <div style="width:calc(150px + (500 / 100%));position:absolute;top:0;left:0;">This one should get bigger as the page gets smaller</div>
</div>

思考过程：

固定宽度（150像素）再加上500除以当前父元素的宽度。

因此，如果父元素为500像素：

150 + 500/500 -> 150 + 1 = 151

父元素为100像素：

150 + 500/100 -> 150 + 5 = 155

父元素为20像素：

150 + 500/20 -> 150 + 100 = 250

- Randy Hall

---

把计算中的百分号去掉？ - Lowkase

Answer 1

解决方案非常简单，令500像素成为第一部分并减去宽度即可。

width:calc(650px - 100%);

当其父元素变窄时，它会变得更宽。

更新的演示

- Randy Hall

Answer 2

calc()需要在操作符（但仅限于+和-）之间加上空格，但是你缺少单位，可以是px、em、rem等等...，所以像这样写：

width:calc(150px + (500px / 100%)) 

这是无效的，因为正如@TylerH所解释的，您不能通过未编辑的值(px, %等)进行除法。

但如果可能的话，当您除以100%时，您实际上是乘以1，因此基本上您将保持不变，因为1是乘法的中性值，因此这样做是没有用的。

---

很难了解，因为在您的问题中并没有什么可以看到，而且仍然是无效的，但我猜您正在寻找类似于以下内容：

width:calc(150px + (100% / 500px)) 

根据您编辑后的问题，我认为您需要使用JavaScript来实现这个功能，除非您能提供一个Fiddle。

- dippas

---

顺便提一下，只有 + 和 - 需要空格。* 和 / 运算符不需要在它们周围加上空格。来源 - TylerH

我点赞了你的评论，我总是忘记这一点，我已经习惯了在所有运算符之间加上空格，感谢提醒。我将更新答案。 - dippas

Answer 3

看起来你已经找到了解决方案，但我会具体回答为什么你的原始代码不起作用：

我将从calc()中产品等式的语法开始（当你进行除法时）：

<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]

calc()属性语法的规范比听起来更加复杂。在这里进行除法运算时，右侧必须是一个数字。你不能使用“带单位”的值：

数字值用 <number> 表示，表示实数，可能带有小数部分。

当文字直接写出时，数字可以是整数，或者是零或多个十进制数字，后跟一个点（.）后跟一个或多个十进制数字，可选地带有由 "e" 或 "E" 和一个整数组成的指数。它对应于 CSS 语法模块 中的产生式。与整数一样，数字的第一个字符可以紧随 - 或 +，以表示数字的符号。

也就是说，你不能将某物除以百分比值，如 100%。

- TylerH