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

Question

我有以下代码,它可以很好地集中我的内容,直到vh少于那么650px.我想知道是否有办法让这个值永远不会0只使用CSS 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);
   }
}