有没有办法让 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;
例如,虽然 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
使其成为负值。
【讨论】:
以上是关于有没有办法让 CSS calc() 永远不会是负值?的主要内容,如果未能解决你的问题,请参考以下文章