csscalcviewport-units

Using css calc with viewport units


Why does this work:

left: calc(50vw - (269 * (100vw  / 1220 ) ) );

But this doesn't:

left: calc(50vw - (269 * (100vw  / 1220 ) ) + 269 );

The only difference being + 269.

FF inspector says 'invalid property value'.


Solution

  • When using calc(), you can multiply and divide by unitless values, but addition or subtraction requires units.

    calc(10vh * 2) — This is ok, and means "I want twice as many vh as I started with".

    calc(10vh + 2) — This isn't ok. "Plus two what: vh? px?".