有没有办法让 CSS calc() 永远不会是负值？答案

【问题标题】：Is there a way to make CSS calc() never be a negative value?有没有办法让 CSS calc() 永远不会是负值？
【发布时间】：2016-06-06 23:04:13
【问题描述】：

我有以下代码，它非常适合将我的内容居中，直到 vh 小于 650px。我想知道是否有办法让这个值永远不会低于0，只使用CSS calc。

.my-margin-top {
    margin-top: calc(50vh - 325px);
}

【问题讨论】：

【解决方案1】：

假设无法绑定calc() 计算的值，您可以在max-height 最多为650px 时使用媒体查询

.my-margin-top {
    margin-top: calc(50vh - 325px);
}

@media all and (max-height: 650px) {
   .my-margin-top {
       margin-top: 0;
   }
}

或者您也可以通过将现有规则包装到 min-height mediaquery 中来还原逻辑

@media all and (min-height: 650px) {
   .my-margin-top {
       margin-top: calc(50vh - 325px);
   }
}

【讨论】：

很好的答案我正在发表评论以将其更改为max-height，这是您在我发布之前所做的。我不敢相信我没有考虑媒体查询。
@cmorrissey：公平地说，您的用例只是碰巧具有适合媒体查询的视口单元。一般来说，您根本无法将 calc() 表达式的结果限制在某个值范围内 - CSS 需要为此提供某种形式的 min() 和 max()。
@BoltClock 在 calc() 计算高度/宽度时会发生异常，因此您可以使用 min/max-height/width 进行限制（也没有媒体查询），请参阅 stackoverflow.com/a/35505372/1098851
是的，这些完全取决于属性，不适用于一般情况。我现在发布了一个包含更多详细信息的答案。我也赞成你的回答。
请注意，这现在是可能的！ max()、min() 和 clamp() 现在在 CSS 中可用。所以对于发帖者的问题，一个答案是：max(0, 50vh-325px)。有关详细信息，请参阅此 stackoverflow 问题：stackoverflow.com/questions/16617248/…

【解决方案2】：

回答一般问题：

有没有办法让 CSS calc() 永远不会是负值？

答案是否定的，因为 CSS 没有提供手动将数量限制（或钳制）到某个最小值或最大值的方法。

数字或长度是否可以本机限制在某个范围内，取决于具有此calc() 值的属性。来自spec：

表达式产生的值必须限制在目标上下文允许的范围内。
这两个等价于'width: 0px'，因为宽度小于0px是不允许的。
width: calc(5px - 10px);
width: 0px;

例如，虽然 margin 和 z-index 的负值有效，但 border-width、padding、height、width 等的负值则无效。这些细节几乎总是在各自属性的规范中定义。

由于您在示例中碰巧使用了视口单元，因此您可以将媒体查询与它们结合使用，例如 demonstrated by fcalderan。

【讨论】：

【解决方案3】：

你也可以使用这个技巧： calc((#{$gap} + 1.5rem) / -1); 将产生 calc(-32px + -1.5rem)

【讨论】：

【解决方案4】：

在最新的浏览器版本中，CSS 中有max() 函数：

.my-margin-top {
    margin-top: max(50vh - 325px, 0);
}

Browser compatibility：Firefox 75+，Chrome/Edge：79+，Safari：11.1+

还有clamp(): clamp(0, 50vh - 325px, 100vh)，其中100vh 是一个上限。但这是not in Safari yet，虽然可以通过min() 和max() 调用来模拟。

【讨论】：

【解决方案5】：

你可以这样做：

.my-margin-top {
    margin-top: calc((50vh - 325px) * (-1));
}

将您的计算结果乘以-1 使其成为负值。

【讨论】：