feststehende Navigation mit Scrollbalken bei Bedarf

[Oleander]

Hallo Gunnar,

vielen Dank für deine schnelle und umfassende Hilfe.

Zu einen: #navigation { height: 100% } kann nicht passen. Wenn das Element erst 100px unter der oberen Viewportkante beginnt und dieselbe Höhe hat wie der Viewport, dann ragt es eben nach unten 100px aus diesem heraus.

Du möchtest von den 100% noch 100px abziehen: calc(100% - 100px).

Perfekt, damit funktioniert es. Dass mehr als 100% etwas zuviel sind, leuchtet schon ein.

Zum zweiten: Damit auch per Tastatur gescrollt werden kann, müssen die betreffenden Elemente den Fokus erhalten können:
<div id="navigation" tabindex="0">,
<div id="inhalt" tabindex="0">.

Habe ich eingefügt. Kann man dabei noch irgendwie verhindern, dass der aktive div in Chrome dann mit einem relativ unschönen blauen Rahmen angezeigt wird?

Drittens sollten das gar keine divs sein; "kopf" auch nicht. Sondern:
<header id="kopf">,
<nav id="navigation" tabindex="0">,
<main id="inhalt" tabindex="0">.

Hmm. Ich habe divs verwendet, da sie mir kompatibler zu älteren Browsern erschienen.

Viertens ist eine feste Höhenangabe wie #kopf { height: 100px } keine so gute Idee. Was, wenn der Inhalt da nicht reinpasst?

In den Kopf kommt entweder nur eine breitere Grafik oder eine schmälere Grafik mit etwas festem Text, der nicht umgebrochen wird. Die Höhe wird dann noch darauf optimiert (vermutlich weniger als 100px).

Und nicht zuletzt verbleiben, wenn 170px für die Navigation abgehen, für den Hauptbereich auf meinem Gerät nur 150px Breite. Die Boxen sollten bei schmalen Viewports untereinander angezeigt werden. Bei Verwendung von min-width und Flexbox oder float braucht man dazu nicht mal einen Media-Query.

Für die Navigation werden 150px ausreichen, was aber nichts prinzipielles ändert. Es ist natürlich immer die Frage, welche Bildschirm- bzw. Fenstergrößen man noch unterstützen will. In Anbetracht von Tabellen mit relativ vielen Spalten, die sich z.T. im Inhaltsbereich befinden werden, erscheint mir eine wirklich sinnvolle Nutzung bei 320px Breite ohnehin etwas illusorisch. Ich wäre schon ganz froh, wenn bei 800x400px im Querformat alles gut nutzbar wäre. Aber ich werde mir das nochmal genauer ansehen...