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

Question

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

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