@@Henry
Vielleicht ist das Zudecken ja gewünscht?
Das glaube ich kaum. Wenn man Inhalte hat, die nie zu sehen sein sollen, weil sie hinter anderen Elementen versteckt sind, warum tut man sie dann überhaupt auf dein Seite?
Weil sie beim Scrollen eben doch zu sehen sind.
Nein, eben nicht.
Du kannst bei dir nachmessen und feststellen, dass der Header 183 Pixel hoch ist und der Footer 237 Pixel hoch. Dann machst du
main { padding-top: 183px; padding-bottom: 237px }
?
Bei anderen brauchen Header und Footer aber womöglich mehr Höhe: andere Schriftart, Schriftgröße, was bei dir in drei Zeilen passt benötigt bei anderen vier und und und …
Und schon sind eben nicht alle Inhalte durch Scrollen zu erreichen, sondern Teile auf Nimmerwiedersehen verdeckt. Es gibt keine magic number, die sicherstellt, das alles erreichbar wäre.
und wenn ich dann schon mehr über JS/CSS mache, dann nehme ich auch lieber gleich das leichte kontrollierbare fixed.
Du willst per JavaScript die Höhe von Header und Footer nach dem Rendern (und nach jedem Neurendern bei resize
) auslesen und das Padding entspreched setzen? Das ist nicht das, was ich „leicht kontrollierbar“ nennen würde.
position: sticky
nenne ich leicht kontrollierbar. Und wenn das in alten Browsern keine Wirkung zeigt, geht die Welt nicht unter.
LLAP 🖖
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann