web-dev-qa-db-ja.com

計算の「vw」CSS単位Chrome機能していません

新しいvw（およびvh、vmin、およびvmax）CSSユニットは、calcと同様に非常に便利です。どちらもChrome（後者の接頭辞は_-webkit-calc_）で正常に機能しますが、何らかの理由で、_v*_を含むcalcプロパティ値が見つかりました。 width: -webkit-calc(95vw - 25em)などの単位は、無効なプロパティ値を生成します。これはまだ実装されていないだけですか、仕様ですか、それともバグですか。

cssgoogle-chromeviewport-units
19
user663031

これはバグであり、Bug 94158 --calcがビューポートユニットで機能していません。

24
Jukka K. Korpela

これは古いバグであり、長い間修正されていますが、古いバージョンのChromeを引き続きサポートしている場合、特にサポートしているAndroidタブレットの古いバージョンのChromeでこのバグが発生した場合は、 （私の場合のように）、このバグを回避する簡単な方法は次のとおりです。

ターゲットとするVWにまたがるラッパーを使用し、calc（...）でビューポートユニットを使用する代わりに、100％を使用します。

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);
}
3
kevin