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

Posted 2023-03-07

【中文标题】是否可以使用 CSS calc() 获得负值？

【英文标题】：Is it possible to get a negative value with CSS calc()?

【发布时间】：2014-10-02 00:35:07

【问题描述】：

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

.centeredmargin: 0 auto; width:960px;

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

.widestmargin: 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 中水平滚动。

你的想法？

【参考方案1】：

编辑：比以前的更简单的技巧：calc(0px - something) - 有一个单元 - 有效，而 calc(0 - something) 没有。见Fiddle 3

这些“技巧”奏效：

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

0 - something 没有（至少在您的示例中）。

Fiddle 1Fiddle 2

【讨论】：

calc(-1 * something) 太棒了！

你也可以做 calc(whatever / -1)

【参考方案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);

【讨论】：

如果布局如此简单，那将可以工作，我可能会解决这个问题，但是需要成为整个页面的“带子”的容器在任何地方都没有相同的高度（尽管高度在使用时是固定的） - 我还必须将边距/填充设置到下一个元素的顶部，以防止它被#full

覆盖

... 还有：我真的很想知道是否可以从 calc() 中获得负值

我喜欢这两种方法，但这种方法感觉不那么骇人听闻......我也觉得自己没有弄清楚这一点有点愚蠢。谢谢

@sw4 这是一个不错的解决方案。但是，我无法弄清楚如何使其适用于响应式fluid-ish 布局，其中#center 没有静态宽度，而是max-width，例如here

@afkatja 如果我正确解释了您的观点，本文包含流体中心所需的解决方案。 .full-width width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; css-tricks.com/full-width-containers-limited-width-parents

【参考方案3】：

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

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

【参考方案4】：

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

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