Seiteninhalt richtig positionieren

[ReinerG]

Hallo Rolf,
danke für die ausführliche Antwort.

Eine „Billiglösung“ besteht darin, den Anker nicht auf die Überschrift zu setzen, sondern auf ein span-Element im Anker. Dieses Span-Element macht man visuell unauffällig und verschiebt es geeignet nach oben:

Das hatte ich mir auch schon überlegt, aber schon deshalb verworfen, weil ja dann ein Screenreader nicht das sieht, was er sehen sollte.

Billiglösungen waren ja noch nie die besten.

Meine Lösung sieht so aus, dass ich die Seite so gestalte, dass der Body 100% Viewporthöhe hat (ggf. korrigiert um Margins). Der fixierte Teil steht oben, der scrollbare Teil befindet sich in einem Scrollcontainer darunter, der den Rest des Viewports ausfüllt. Der Scrollbar gilt dann nur für den Inhaltsteil und der Header bleibt stehen.

Das kann man mit Rechnerei umsetzen, mit Flexbox oder mit Grid. Nimm Grid…

Mit Grid hatte ich bisher nie was gemacht. Muss ich mich jetzt eben mit befassen.

Den Radiobutton-Hack für das Menü im "Schmal" Modus solltest Du entfernen, das ist unzeitgemäß und nicht zugänglich. Ich habe das Thema mit Jürgen im Thread "Popover" diskutiert, schau mal dort. Das Wiki hat auch was zu Popover, aber die anchor-Diskussion ist dort noch zurückgestellt und ist bisher auch nur in Chromium-Browsern gegeben. Ob der Polyfill überall funktioniert, kann ich nicht sagen.

Das mit dem Radiobutton-Hack und Popover verstehe ich gerade nicht.
Das Menu habe ich übernommen (kopiert) und etwas angepasst. Ergo werde ich auch hier meinen Wissensstand erweitern müssen.

Meinst du diesen Thread: Popover abgetrennt aus....?

Gruß Reiner