LESS: Viewport Größen mit Pixelangaben verrechnen

Wenn man mit calc die viewport height bzw. viewport width mit einer Pixelangabe verrechnen möchte, stolpert man oft über eine „inkorrektes“ Ergebnis

Bsp: min-height: calc( 100vh – 90px) ergibt min-height: calc(10vh)

Der Grund hierfür ist dass LESS die Viewport Höhe nicht korrekt erkennt und berechnen kann.

Lösung: min-height: calc( ~“100vh“ – 90px)

Durch escapen kann LESS nun den korrekten Wert berechnen und gibt keinen CSS Fehler aus.

Die Pixelangabe lässt sich natürlich auch durch eine less-Variable ersetzen.


Beitrag veröffentlicht

in

von

Schlagwörter: