Darstellungsproblem

[Gunnar Bittersmann]

@@MudGuard

Meinst Du etwa: wenn ein vertikaler Scrollbar nötig ist, verschiebt sich der Inhalt aufgrund seiner Zentrierung um die halbe Scrollbarbreite nach links.

Kann aber eigentlich nicht sein, denn das ist normal und kein Problem.

Aber schön ist es auch nicht. Und es ist nicht so, dass man dagegen nichts machen könnte.

Wenn man für Bereiche wie bspw. Header und Footer farbigen Hintergrund über die volle Seitenbreite haben möchte, geht die Zentrierung mit body { max-width: 42rem; margin: auto } nicht. Also mit Santa hat selector zentriert:

body > *
{
	padding: 1rem;
}

@media (min-width: 44em)
{
	body > *
	{
		padding-left:  calc((100vw - 42rem)/2);
		padding-right: calc((100vw - 42rem)/2);
	}
}

(Die rot hervorgehobenen Klammern sind nicht mein Fehler, sondern der des kaputten Syntax-Highlighters.)

Die Regeln gehen davon aus, dass als Kinder von body nur Strukturelemente wie <header>, <main> und <footer> vorkommen. Man könnte statt body > * natürlich auch header, main, footer selektieren.

Der Breakpoint 44em im Media-Query ist die Summe aus der maximalen Breite 42rem und dem Padding links und rechts jeweils 1rem. Wenn man maximale Breite/Padding ändert, muss man das an mehreren Stellen anpassen – unschön. (Bei Verwendung eines CSS-Präprozessors wird man Variablen verwenden und den Breakpoint daraus berechnen.)

Damit der Seitennhalt nun mit und ohne Scrollbar horizontal gleich plaziert ist, zieht man rechts beim Padding die Breite der Scrollbar ab. Dazu fügt man als progressive enhancement im Media-Query noch eine Deklaration hinzu:

@media (min-width: 44em)
{
	body > *
	{
		padding-left:  calc((100vw - 42rem)/2);
		padding-right: calc((100vw - 42rem)/2);

		padding-right: calc((100vw - 40rem)/2 - var(--scrollbar-width, 0px));
	}
}

Die Breite der Scrollbar – d.h. den Wert der custom property – berechnet man mit einer JavaScript-Funktion (eine CSS-Lösung wollte mir nicht einfallen)

function adjustCenteredContent()
{
	document.documentElement.style.setProperty(
		'--scrollbar-width',
		`${window.innerWidth - document.documentElement.clientWidth}px`
	);
}

die man initial aufruft, bei Änderungen der Viewportgröße und ggfs. auch bei dynamischem Hinzufügen/Entfernen von Seiteninhalten.

☞ Guckst du Codepen.

Was noch zu tun ist: Den ES6-Code mit Template-Strings durch feature detection in alten Browsern nicht laden, damit kein JS-Fehler auftritt. Da diese Browser mit custom properties nichts anfangen können, brauchen sie den Code sowieso nicht.

Man könnte sicherlich auch (window.innerWidth - document.documentElement.clientWidth) + 'px' schreiben und den Wert nicht per custom property an CSS übergeben, sondern das Padding gleich mit JavaScript jeweils für document.querySelector('body > header'), document.querySelector('body > main') und document.querySelector('body > footer') setzen; das wäre aber Aufwand und in Zukunft wartungsintensiv. Hey, progressive enhancement!

LLAP 🖖