2014-12-02 45 views
59

Tôi đã theo quy tắc CSS trong một file Trừ:Có thể sử dụng các điểm ảnh vh trừ trong CSS calc()?

.container { 
    min-height: calc(100vh - 150px); 
} 

nào không làm việc ở tất cả. Tôi muốn làm cho chiều cao cửa sổ container đầy đủ và tiêu đề trừ, chiều cao cố định chân trang. Làm thế nào tôi có thể làm điều đó?

+2

Dường như làm việc - http://jsfiddle.net/ gz4zp1ua/2/ –

+1

Đảm bảo trình duyệt được đề cập thực sự hỗ trợ những gì bạn đang yêu cầu: http://caniuse.com/#feat=calc và http://caniuse.com/#feat=viewport-units. – cimmanon

+0

Tôi đã đóng này như là một dupe vì thread đó có chi tiết về các tùy chọn cập nhật cũng có thể hữu ích cho những người khác (trên đầu trang của nó, câu hỏi đó cũng có lượt xem và số phiếu bầu cao hơn). – Harry

Trả lời

127

Nó thực sự hoạt động. Vấn đề là với trình biên dịch ít hơn của tôi. Nó được biên soạn để:

.container { 
    min-height: calc(-51vh); 
} 

cố định với đoạn mã sau trong vòng chưa file:

.container { 
    min-height: calc(~"100vh - 150px"); 
} 

Nhờ liên kết này: Less Aggressive Compilation with CSS3 calc

+0

Điều này đã làm các trick! Cảm ơn bạn – yngrdyn

+10

Bị cắn bởi điều này. Trong trường hợp bạn cần sử dụng các biến bên trong chuỗi, bạn có thể làm như thế này: 'calc (~" 100vh - @ {navbar-height} ")' –

+1

Mẹo hoàn hảo, nhờ bạn! Tự hỏi tại sao nó hoạt động trong .css nhưng không phải trong .less – Destunk

Các vấn đề liên quan