CSS calc（）函数

Question

我使用的是最新版本的Chrome，但在使用CSS calc（）函数时在Dev Tools中出现“无效属性”错误。

我之前从未真正使用它，所以我可能在这里做错了，虽然我看不清楚。希望有人可以帮助我解决这个问题。

这是我的代码。

padding-top: calc(980px / 1980px) * 100;

这用于计算背景图像上的填充顶部，以便在响应的背景图像上具有16：9的比例。

答案是49.49％。

我的css的这个特定部分的其余代码如下所示，以便CSS能够解决这个问题。

.hero{
/** Height 980px / Width 1980px * 100 -- Keeps image aspect at 16:9 **/
padding-top: calc(( 980px / 1980px ) * 100);

max-width:1980px;
background:url('images/default-bg.jpg') no-repeat center center #fff;
background-size:cover;

}

希望有道理。我看看我可以使用它似乎不是一个不使用供应商前缀的问题。

另一件需要注意的事情是我正在使用SCSS和Scout App。我应该只使用SCSS计算来做这件事吗？

只是想使用这个css函数，因为我以前从未使用过它。

谢谢丹

Answer 1

你不能只用numbers除以单位。

Answer 2

你可以得到你想要的......

padding-top: calc(980px / 1980 * 100);

Answer 3

您根本不需要使用px作为单位。除px / px将导致无单位，因此没有必要将其放入计算中。简单地说：

padding-top: calc(980 / 1980 * 100%);

我刚测试过，它在Chrome中运行良好。

Answer 4

您正在使用

padding-top: calc(980px / 1980px) * 100);

使用以下

padding-top: calc(980px / 1980 * 100);

calc guide

张贴一个工作实例

.box {
  width:500px;
  height:500px;
  background:tomato;
  padding-top: calc(980px / 1980 * 100);
}

<div class="box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque molestiae, quos mollitia dolorum id eaque in repellendus? Quae itaque numquam ipsa quasi eos, ea ullam at vero perspiciatis velit? Nesciunt.
</p>
</div>

Answer 5

即使calc（）函数允许使用不同的单位，您也应该除以无单位数。例如：

width: calc(500px / 50 *2)

有一篇很棒的文章解释了calc（）函数here。