hallo
Wenn Header und Footer ständig im Viewport bleiben sollen, dann ist nicht
position: fixed
das Mittel der Wahl, sondernposition: sticky
. Damit bleibt der Hauptinhalt vollständig sichtbar. Ich hab das in diesem Beispiel mal hinzugefügt – im media query; bei geringer Viewporthöhe sollen Header und Footer nicht sticky sein, sonst wäre der Hauptinhalt nur durch einen schmalen Sehschlitz sichtbar.
Das sieht ja nicht schlecht aus: https://caniuse.com/#search=sticky