Kopf und Fuß laufen über die volle Breite

Eine kleine Änderung, die auf jeder Seite hier zu sehen ist: Das dunkle Band oben und die Fußzeile unten laufen jetzt über die volle Breite des Fensters.

Bis heute saßen sie in derselben 1180-Pixel-Spalte wie alles andere, sodass die Seite auf einem breiten Bildschirm ein Inhaltsstreifen war, der in leerem Hintergrund schwebte. Die Fußzeile auf den Statistikseiten war bereits über die volle Breite — sie war die einzige, und genau diese Uneinheitlichkeit hat das hier ausgelöst.

Was sich nicht geändert hat

Der Inhalt innerhalb dieser Bänder. Text, Schaltflächen und Zahlen richten sich weiterhin an denselben 1180 Pixeln aus wie die Abschnitte darunter, sodass das Band breit ist, der Text aber nicht. Niemand liest Zeilen mit hundert Zeichen, und eine Überschrift, die sich über einen 27-Zoll-Monitor zieht, ist kein Design, sondern ein Versehen.

Warum nicht der übliche Trick

Der übliche Weg, ein Element aus einer zentrierten Spalte auszubrechen, ist ein negativer Rand gegen 100vw. Das hat einen Fehler, der auf einem Desktop mit ausgeblendeter Scrollleiste leicht zu übersehen ist: vw schließt die Scrollleiste mit ein. Der Block wird dadurch um genau diese Breite breiter als der sichtbare Bereich, und die ganze Seite lässt sich ein paar Pixel seitwärts ziehen — was auf dem Handy bedeutet, dass das Layout unter dem Daumen wackelt, mitten im Lesen.

Das Band greift also nicht nach außen, sondern beginnt breit und polstert nach innen:

padding-inline: max(20px, calc((100% - 1180px) / 2))

Prozentangaben beziehen sich auf das Elternelement, in diesem Fall den Seitenkörper, der die Scrollleiste nicht mit einschließt. Unter 1180 Pixeln gewinnt der erste Wert, und das Band behält einen vernünftigen 20-Pixel-Rand statt eines negativen. Kein zweiter Wrapper, kein JavaScript, nichts, was zur Laufzeit gemessen werden müsste.

Wo es angewendet wird

Die Startseite, die Infoseite und jede Statistikseite. In allen dreien dieselbe Konstruktion, und genau das war der Sinn der Sache.