是否可以使用 CSS calc() 获得负值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25205039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to get a negative value with CSS calc()?
提问by Jayx
Let's say we have a container that is centered in the viewport ...
假设我们有一个以视口为中心的容器......
.centered{margin: 0 auto; width:960px;}
... and inside that container I have another that needs to have a width of 100% the viewport width. I could set the margin to ...
...在那个容器内，我有另一个容器的宽度需要为视口宽度的 100%。我可以将边距设置为...
.widest{margin: 0 -480px}
... for example. The thing is that the value won't be -480px, but actually the viewport width (960px) - the .centered width / 2 ... all good and easy with calc(), only I need a result that is a negative value.
... 例如。问题是该值不会是 -480px，但实际上是视口宽度（960px） - .center 宽度 / 2 ......使用 calc() 一切都很好而且很容易，只有我需要一个负值的结果.
.widest{
margin: 0 calc( (100vw - 960px) / 2 );
}
I've tried subtracting the lot from 0 to get a negative value, but no go.
我试过从 0 中减去很多以获得负值，但没有成功。
I don't want to use JS and I only have issues in Webkit - not with the calc() though - my problem is that if I hack it into submission by doing ...
我不想使用 JS 并且我只在 Webkit 中遇到问题 - 虽然不是 calc() - 我的问题是，如果我通过执行...
.widest{
margin: 0 -100%;
}
... my page scrolls horisontally in Chrome/Safari.
...我的页面在 Chrome/Safari 中水平滚动。
Your thoughts?
你的意见？
回答by FelipeAls
EDIT: A simpler trick than previous ones: calc(0px - something)- with an unit - works while calc(0 - something)doesn't. See Fiddle 3
编辑：一个比以前更简单的技巧：calc(0px - something)- 有一个单位 - 工作而calc(0 - something)没有。见小提琴 3
These "tricks" work:
这些“技巧”有效：
calc(1px - something - 1px);
calc(-1 * something)
calc(0px - something) /* new */
where 0 - somethingdidn't (at least with your example).
哪里0 - something没有（至少在你的例子中）。
回答by SW4
Yes, this is possible, to a point. The crucial part is to set the width of the element to 100vwthen offset it by negative half the viewport width plus half the width of the centered element using, e.g. calc(-50vw + 200px):
是的，这在一定程度上是可能的。关键部分是设置元素的宽度，100vw然后将其偏移视口宽度的负一半加上居中元素宽度的一半，例如calc(-50vw + 200px)：
Demo Fiddle
演示小提琴
Given the HTML
鉴于 HTML
<div id='center'>center
<div id='full'>full width</div>
</div>
CSS
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);
}
回答by sneduka
I have another possible solution. You can devide by -2, so you'll get a negative Result
我有另一个可能的解决方案。你可以除以 -2，所以你会得到一个负面的结果
.widest{
margin-left: calc( (100vw - 960px) / -2 );
}
回答by Oleg Sewruk
You could try next solution
您可以尝试下一个解决方案
.some-class {
margin-left: calc(-1px - ((100vw - 100%) / 2) + 1px);
}
