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

Posted

技术标签:

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

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

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

【问题讨论】:

这能回答你的问题吗? Calc of max, or max of calc in CSS 【参考方案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 进行限制(也没有媒体查询),请参阅 ***.com/a/35505372/1098851 是的,这些完全取决于属性,不适用于一般情况。我现在发布了一个包含更多详细信息的答案。我也赞成你的回答。 请注意,这现在是可能的! max()、min() 和 clamp() 现在在 CSS 中可用。所以对于发帖者的问题,一个答案是:max(0, 50vh-325px)。有关详细信息,请参阅此 *** 问题:***.com/questions/16617248/…【参考方案2】:

回答一般问题:

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

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

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

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

这两个等价于'width: 0px',因为宽度小于0px是不允许的。

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

例如,虽然 marginz-index 的负值有效,但 border-widthpaddingheightwidth 等的负值则无效。这些细节几乎总是在各自属性的规范中定义。

由于您在示例中碰巧使用了视口单元,因此您可以将媒体查询与它们结合使用,例如 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 使其成为负值。

【讨论】:

以上是关于有没有办法让 CSS calc() 永远不会是负值?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 calc() 表达式中获取 CSS 变量的负值?

有没有办法在 CSS calc 中使用 pi?

有没有办法从 CSS 中的 calc 函数中删除单位

在 css calc 函数中使用模数

禁用 LESS-CSS 覆盖 calc() [重复]

DIV+CSS:页脚永远保持在页面底部