feststehende Navigation mit Scrollbalken bei Bedarf

[Gunnar Bittersmann]

@@Oleander

Wo liegt der Fehler? Hat jemand einen Vorschlag, wie ich das gewünschte erreichen kann?

Mehrere.

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).

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">.

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

Die IDs brauchst du dann vielleicht nicht.

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

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.

LLAP 🖖