Ob Vollbildsektionen, flexible Layouts oder präzise Abstände – ein paar CSS-Konzepte machen den Unterschied zwischen Code, der irgendwie funktioniert, und Code, der wirklich professionell ist. Hier sind die sechs Konzepte, die du als Webentwickler sicher beherrschen musst.
Vollbildsektionen und flexible Größen: vh und calc()
Wenn du Sektionen baust, die genau so groß sein sollen wie der Bildschirm, greifst du vielleicht instinktiv zu height: 100%. Das Problem: 100% bezieht sich auf die Höhe des Elternelements. Wenn das Elternelement keine definierte Höhe hat, passiert einfach nichts.
Die richtige Einheit heißt vh. Ein vh entspricht 1% der Viewport-Höhe, also des sichtbaren Browserbereichs. Mit height: 100vh füllt eine Sektion immer den gesamten Bildschirm aus, egal auf welchem Gerät.
Jetzt kommt die häufigste Folgefrage: Was, wenn du eine Navigationsleiste hast? Sagen wir, die ist 100px hoch. Dann soll die erste Sektion 100vh - 100px groß sein, nicht mehr. Dafür gibt es calc():