loading...
Cover image for Mobile Phones 100vh issue

Mobile Phones 100vh issue

tobiasroeder profile image Tobias Röder ・1 min read

In diesem Blog wird kurz erklärt, wie man auf dem Smartphone das 100vh Problem lösen kann.

In diesem Codepen Beispiel ist ein Lösungsweg, wie man die '100vh' Höhe in einem mobile Browser mit CSS einstellt.

Kurz erklärt: das am übergeordnetste div Element, in diesem Beispiel #app, wird mit der Hilfe von position: absolute und top: 0; right: 0; bottom: 0; left: 0; auf die komplette Größe in der Breite als auch in der Höhe der Browsers gesetzt. Das ist wie die Höhe auf 100% zu setzten.

Discussion

markdown guide