Có cách nào để làm cho CSS calc() không bao giờ là một giá trị âm?

Question

Tôi có mã sau hoạt động tốt với việc căn giữa nội dung của tôi cho đến khi vh ít hơn 650px. Tôi đã tự hỏi nếu có một cách để làm cho giá trị này không bao giờ dưới đây chỉ 0 chỉ sử dụng CSS calc.

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

Answer 1

Premising rằng không có cách nào để bị ràng buộc các giá trị tính bằng calc() bạn có thể sử dụng một mediaquery khi max-height là tại hầu hết các 650px

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

@media all and (max-height: 650px) { 
    .my-margin-top { 
     margin-top: 0; 
    } 
} 

hoặc bạn cũng có thể phục hồi các logic bằng cách gói các quy tắc hiện vào a min-height mediaquery

@media all and (min-height: 650px) { 
    .my-margin-top { 
     margin-top: calc(50vh - 325px); 
    } 
} 

Answer 2

Để trả lời câu hỏi chung:

Có cách nào để làm cho CSS calc() không bao giờ là giá trị âm?

Câu trả lời là không, bởi vì CSS không cung cấp cách tự ràng buộc (hoặc kẹp) một số lượng với một số giá trị tối thiểu hoặc tối đa.

Có hoặc không một số hoặc độ dài có thể là nguyên bản bị hạn chế ở một phạm vi nhất định tùy thuộc vào thuộc tính có giá trị calc() này. Từ số spec:

Giá trị kết quả từ biểu thức phải được kẹp vào phạm vi được phép trong ngữ cảnh đích.

Hai giá trị này tương đương với 'width: 0px' vì độ rộng nhỏ hơn 0px không được phép.

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

Ví dụ, trong khi giá trị âm cho margin và z-index có giá trị, giá trị âm cho border-width, padding, height, width và như vậy là không. Các chi tiết cụ thể trong số này hầu như luôn được định nghĩa trong đặc tả cho thuộc tính tương ứng.

Khi bạn tình cờ sử dụng đơn vị khung nhìn trong ví dụ của mình, bạn có thể sử dụng truy vấn phương tiện kết hợp với chúng dưới dạng demonstrated by fcalderan.