Die Einheit vh in der Praxis

Andrew Ckor beschreibt, wie man mittels der Einheit „vh“ viewportfüllende Designs ohne eine Zeile JavaScript erstellen kann. Er unterfüttert seine Ausführungen mit guten und bekannten Beispielen.

Die Einheit wird ab IE9 unterstützt. Für den IE8 benötigen wir entweder einen Polyfill, eine JavaScript-Funktion oder wir geben einfach im Geiste von Graceful Degredation diesem Browser ein leicht anderes Design. Der IE9 hat allerdings einen üblen Bug: in Printstylesheets werden aus „90vh“, also der 90%igen Viewporthöhe, einfach mal „90 Seiten“. Die IE-Entwickler haben einen schrägen Humor! (Auf der verlinkten Seite im Reiter „Known Issues“ schauen.)

4 Kommentare

  1. Ahja, sehr cool. – Ganz so rosig sind die Zeiten für vh ja noch nicht; denn es gibt durchaus noch ältere Androids oder iOS7-Geräte. Zumindest für iOS skizziert Patrick Burtchaell in einem feinen Gist eine Nur-CSS- Lösung: https://gist.github.com/pburtchaell/e702f441ba9b3f76f587

    • Danke für den Link zum Gist, Carsten. Es macht aber Hoffnung, dass der Workaround funktioniert. Und bei den betreffenden Browsern kann man ja zudem mit calc() arbeiten. In solchen Situationen wünsche ich mir immer Conditional Comments für alle Browser. Denn mit Feature-Tests bin ich ja wieder abhängig von JavaScript.

  2. Sehr guter Link, danke für’s teilen.
    Gerade für die ganzen Fullscreen-Backgrounds, welche ja gerade so „In“ sind, ist das eine Top-Möglichkeit ohne JS zu arbeiten. Aber es wird wohl noch ein Stück dauern bis man es für öffentliche Seiten flächendeckend einsetzen kann.

    • Ich finde, es spricht nichts dagegen, die Einheit für Fullscreen-Seiten anzuwenden. Einzig der IE8 macht nicht mit. Der bekommt dann entweder nicht diesen Effekt, sondern nur den Inhalt, oder er bekommt ein Polyfill. Denn ohne JS würde es sonst sowieso nicht funktionieren.

      Ich weiss, dass gerne die Kunden, die eine solche Seite haben wollen, überhaupt nicht die Browser selber im Einsatz haben, die dafür notwendig wären. Deshalb finde ich die Polyfill-Lösung so charmant.

      Warum also soll man die Technik nicht flächendeckend einsetzen?