Hallo
hat jemand eine andere schöne Idee?
Ja.
und ihnen Höhen in em zugeteilt
Das ist ein typischer Anfängerfehler. Die Höhe von Containern wird grundsätzlich von deren Inhalt bestimmt. Höhenangaben (height, min-height, max-height) sollten nur in Ausnahmefällen vorgegeben werden, wenn es keine anderen Lösungen gibt.
In deinem Fall sind Höhenangaben nicht erforderlich. Du solltest als nur den header und den footer oben und unten im Fenster fixieren.
Der <div id="content"> (auch position:fixed;)
Falsch. position weglassen.
Insgesamt bietet sich Flexbox als Lösung an.
Gruss
MrMurphy