feststehende Navigation mit Scrollbalken bei Bedarf

[Gunnar Bittersmann]

@@Oleander

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.

Wo du weiter unten alte Browser ansprichst: calc() geht im IE erst ab IE 9. Für alte Browser wäre eine andere Lösung vorzusehen, z.B. den Header nicht fix zu positionieren.

Was sowieso nicht immer die beste Idee ist, da der auf kleinen Bildschirmen wertvollen Platz wegnimmt. Also die fixe Positionierung mit Media-Query für große Viewports und moderne Browser (alte verstehen Media-Queries nicht) hinzufügen.

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?

Auf den Fall muss dem Nutzer, der per Tastatur navigiert, deutlich gemacht werden, welches Element den Fokus hat. Du kannst nicht den blauen Rahmen wegnehmen ohne eine andere Kennzeichnung vorzusehen. Wie hättest du es denn gern?

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.

Bei divs gehen Nutzern assistiver Technologien wertvolle Informationen zur Seitenstruktur verloren. Verwende die richtigen HTML-Elemente. Falls die Darstellung in alte Browser bei deiner Zielgruppe wirklich noch ein Thema sein sollte, baue per conditional comment ein HTML5-Shiv ein.

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

Die Höhe zu „optimieren“ kann bei einigen Nutzern schiefgehen: Text wird auf ihrem System anders gerendert (z.B. wegen anderer Schriftart; das kann aber selbst bei der selben auftreten), so dass das, was bei dir in eine Zeile passt (bzw. in n Zeilen), bei anderen jedoch nicht, sondern zwei Zeilen (bzw. n + 1) beansprucht.

Nun schreibst du, dass bei dir nicht umbrochen wird. (Sondern? Abgeschnitten?) Aber auch eine Zeile kann auf verschiedenen Systemen unterschiedlich hoch sein. Der Nutzer könnte eine seinen Vorstellungen entsprechende andere Schriftgröße verwenden. Selbst bei gleicher Schriftgröße kann die Zeilenhöhe auf verschiedenen Systemen unterschiedlich sein (z.B. bedingt durch verschiedene Fonts).

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

Darauf, mit welchen Geräten deine Seiten verwenden, hast du kaum Einfluss. Wohl aber darauf, wie deine Seiten auf den Geräten dargestellt werden.

Man kann ja Inhalte sich kleinen Viewports anpassen lassen und sie dann nicht in Tabellenform, sondern auf eine für diese Geräte geeignete Weise darstellen lassen. Responsive Tabellen im SELFHTML-Wiki und bei meinem geschätzten Kollegen.

LLAP 🖖