有没有办法使CSS calc（）永远不会是负值？

Question

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

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

Answer 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媒体查询中来恢复逻辑

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

Answer 2

回答一般性问题：

  

有没有办法让CSS calc（）永远不会是负值？

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

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

  

表达式产生的值必须限制在目标上下文中允许的范围内。

     

    

这两个相当于＆＃39; width：0px＆＃39;因为不允许宽度小于0px。

width: calc(5px - 10px);
width: 0px;

  

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

正如您在示例中使用视口单元一样，您可以将媒体查询与demonstrated by fcalderan一起使用。

Answer 3

您还可以使用以下技巧： calc((#{$gap} + 1.5rem) / -1);将产生calc(-32px + -1.5rem)

Answer 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()调用来模拟。

Answer 5

你可以这样做：

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

将计算乘以 -1 使其成为负值。