是否可以使用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 );
}