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)没有时工作。见Fiddle 3

这些＆＃34;技巧＆＃34;工作：

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

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

Fiddle 1
Fiddle 2

Answer 2

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

Demo Fiddle

给出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，因此您将获得否定结果

next

Answer 4

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

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

是否可以使用CSS calc（）获得负值？

4 个答案:

Demo Fiddle