Element am unteren Rand des viewports positionieren

[Gunther]

Hallo Tine!

Es soll tatsächlich der gesamte viewport in der Höhe ausgefüllt werden.
Wie grade schon geschrieben, soll der Footer allerdings eine fixe Höhe haben, die Höhe des Headers soll sich nach seinem Inhalt richten.

Was für eine Höhe gebe ich denn dann dem Main?

Eine reine CSS-Lösung besteht bspw. darin, display:table[-row|-cell] zu verwenden.
Ich habe dir hier mal ein Beispiel erstellt.

Das mittlere DIV-Element ist das, was "automatisch" an die verbleibende Höhe angepasst wird. Die beiden anderen richten sich entweder nach ihrem Inhalt wie im Beispiel, oder du kannst ihnen auch eine feste Höhe zuweisen.

Gruß Gunther