css - 是否可以使用 CSS calc() 获得负值？

Question

假设我们有一个位于视口中心的容器......

.centered{margin: 0 auto; width:960px;}

...在该容器内，我还有另一个需要具有视口宽度 100% 的宽度。我可以将边距设置为...

.widest{margin: 0 -480px}

... 例如。问题是该值不会是-480px，但实际上是视口宽度（960px）- .centered width / 2 ...使用calc（）一切都很好而且很容易，只有我需要一个负值的结果.

.widest{
  margin: 0 calc( (100vw - 960px) / 2 );
}

我试过从 0 中减去很多来得到一个负值，但不行。

我不想使用 JS，而且我只在 Webkit 中遇到问题 - 但 calc() 没有问题 - 我的问题是，如果我通过执行...

.widest{
  margin: 0 -100%;
}

...我的页面在 Chrome/Safari 中水平滚动。

你的意见？

Answer 1

编辑：一个比以前更简单的技巧：calc(0px - something)- 有一个单元 - 工作而calc(0 - something)没有。见小提琴 3

这些“技巧”有效：

calc(1px - something - 1px);
calc(-1 * something)
calc(0px - something) /* new */

哪里0 - something没有（至少在你的例子中）。

小提琴 1
小提琴 2

Answer 2

是的，在某种程度上这是可能的。关键部分是设置元素的宽度，100vw然后将其偏移视口宽度的负一半加上居中元素宽度的一半，例如calc(-50vw + 200px)：

演示小提琴

鉴于 HTML

<div id='center'>center
    <div id='full'>full width</div>
</div>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    text-align:center;
    position:relative;
}
#center {
    width:400px;
    height:100%;
    background:red;
    margin:0 auto;
}
#full {
    width:100vw;
    height:100px;
    background:green;
    margin-left:calc(-50vw + 200px);
}

Answer 3

我有另一个可能的解决方案。你可以除以-2，所以你会得到一个否定的结果

.widest{
  margin-left: calc( (100vw - 960px) / -2 );
}

Answer 4

您可以尝试下一个解决方案

.some-class {
   margin-left: calc(-1px - ((100vw - 100%) / 2) + 1px);
}