CSS3 eşdeğeri genişlik: calc (% 100 - 10 piksel)

Question

CSS'ye geçiş yapmak için bir alternatif arıyorum - zaten FF ve Chrome üzerinde çalışıyoruz - çünkü QtWebKit bazı CSS3 özelliği yeat değil.

.fit { 
    width: -moz-calc(100% - 10px); 
    width: -webkit-calc(100% - 10px); 
    width: -o-calc(100% - 10px); 
    width: calc(100% - 10px); 
} 

ben tel kafes örnekte gösterilen bir sınıf tüm elemanının boyutuna istiyorum:

aşağıdaki şeyler var.

Not: Hemen hemen tüm CSS3 özelliklerini render mükemmel olabilir, ama *-calc() önce sayed olarak sorunları var ve diğer çözüm örneğin bulamıyor olabilir. margin-right, padding-right vb

@EDIT kullanarak: Bir keman http://jsfiddle.net/dj3hh/ oluşturulan beklenen davranış göstermek için - Sen keman ve sağ tüm marjları saygı 10px boyutlandırabilirsiniz. Bunu yapmak için yeni bir yol istiyorum calc()

Answer 1

Kutu model oluşturmayı box-sizing: borderbox olarak değiştirirseniz, dolgu eklenmek yerine toplam genişliğe dahil edilir. Bu örnekte, sınıfı sarma öğelerine eklediğinizi varsayıyorum. Tarayıcı desteği çok iyidir; tüm modern tarayıcılar. Sadece IE7 ve altında bir polyfill'e ihtiyacınız olacak. Daha fazla arka plan bilgi için

: paulirish.com/2012/box-sizing-border-box-ftw/

---

DÜZENLEME: Bu benim tamamen kısa karşıladığına inanıyorsanız bir çözümdür

, keman bakın: ... http://jsfiddle.net/David_Knowles/UUPF2/

.fit { 
    width:100% 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;  
    box-sizing: border-box; 
} 

td { 
    padding-right: 10px; 
} 

Answer 2

üst öğesine, sonra yapın üzerine position: relative koyun

.fit { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 10px; 
}