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

Question

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

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

score 17 · Accepted Answer

假设没有办法限制您计算的值，最多calc()可以使用媒体查询max-height650px

.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);
   }
}

score 4 · Accepted Answer

要回答一般问题：

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

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

数字或长度是否可以在本机限制到某个范围取决于具有此calc()值的属性。从规格：

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

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

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

score 1 · Accepted Answer

在最新的浏览器版本max()中，CSS 中有以下功能：

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

浏览器兼容性：Firefox 75+，Chrome/Edge：79+，Safari：11.1+

还有clamp(): clamp(0, 50vh - 325px, 100vh)，哪里100vh是上限。但这在 Safari 中还没有，虽然可以用min()和max()调用来模拟。

score 0 · Accepted Answer

0

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

于 2020-03-23T15:49:24.323 回答

score 0 · Accepted Answer

您可以执行以下操作：

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

将您的 calc 乘以-1使其为负值。

5 回答 5