"vw" CSS birimleri

Question

çalışmıyor calc olduğu gibi yeni vw (ve vh, vmin ve vmax) CSS birimleri, oldukça yararlıdır. Her ikisi de Chrome'da iyi çalışır (ikincisi -webkit-calc olarak önceliğe sahiptir), ancak bir nedenden dolayı birim gibi width: -webkit-calc(95vw - 25em) gibi bir özellik değerinin geçersiz bir özellik değeri verdiğini buldum. Bu henüz henüz uygulanmadı mı, teknik mi, bir hata mı?

Answer 1

O Bug 94158 olarak kayıtlı bir hata, var - kalk viewport birimlerinin ile çalışmıyor.

Answer 2

Eski bir hata ve uzun süredir düzeltildi, ancak hala eski sürümlerini destekliyorsanız ve özellikle de bu hatayı bir Android tablette eski bir krom sürümüyle karşılaşıyorsanız (benim durumum gibi)), işte bu hata ile karşılaşabileceğiniz basit bir yol:

Hedeflediğiniz VW'yi kaplayan bir sarıcı kullanın ve sonra da calc (view) içindeki viewport birimlerini kullanmak yerine% 100 kullanın.

html:

<div class="container"> 
    <div class="inner-calc-with-viewport-units-bugged" /> 
</div> 

CSS:

.container { 
    width: 100vw; //or height: 100vh, depending on your usecase 
} 
.inner-calc-with-viewport-units-bugged { 
    width: calc(100% - XXXXX px); //or height: calc(100% - XXpx); 
}