Neden CSS calc (% 100 -250px) çalışmıyor?

Question

Bunu Firefox, Chrome, IE 11'in en son sürümlerinde denedim. Bu tarayıcılardan hiçbiri, CSS calc() işlevini, örn. width. Görebildiğim kadarıyla düzgün uyguladım. Başvuru için Neden bu olmuyor

http://www.sitepoint.com/css3-calc-function/

kontrol etmek isteyebilirsiniz?

div { 
 
    background-color: blue; 
 
    height: 50px; 
 
    width: calc(100%-250px); 
 
}

<div></div>

Demos:

http://codepen.io/anon/pen/wazZWm

http://jsfiddle.net/h5mzcow1/

Düzenleme:

Evet, bu soru birçok düzenleme sırasında bir çoğaltma haline geldi, ancak hala bunun burada kalması gerektiğini düşünüyorum, çünkü bu sorun örneğin CSS calc() not working'dan daha iyi gösteriyor. Ayrıca, imho çok daha iyi. Eğer düzgün çalışması için sırayla + veya - operatör arasına boşlukkoymak zorunda çünkü

Answer 1

öyle.

div { 
 
    background-color: blue; 
 
    height: 50px; 
 
    width: calc(100% - 250px); 
 
}

<div></div>

MDN Dokümanlar

:

Not: + ve - operatörler her zaman boşluk içine alınmalıdır. Örneğin calc(50% -8px) işleneni, yüzdesi olarak negatif bir uzunluk, geçersiz bir ifade olarak ayrıştırılırken, , calc(50% - 8px) işleneni, bir eksi işareti ve bir uzunluğudur. Daha da ötesi, calc(8px + -50%), bir uzunluğunun ardından bir artı işareti ve negatif bir yüzde olarak muamele edilir. * ve / işleçlerinde boşluk kullanılmaz, ancak tutarlılık eklemek için izinlidir ve önerilir.

Kaynak: MDN

W3C Documentation