Div so einstellen, dass der Rest der Höhe dynamisch ausgefüllt wird?

So. Mein Code ist etwas in der Art von

<html>
<body>
    <div id="header" style="width:100%;min-height:0;display:block;background-color:#000">
        <img src="header_image.svg" />
    </div>
    <div id="content" style"display:block">
        Some content
    </div>
</body>
</html>

Ich habe eine Svg in der Kopfzeile, die ich so eingestellt habe, dass sie mit der Breite des Fensters und den Höhenskalen übereinstimmt, um die Svg beizubehalten. Dann habe ich den Rest der Seite in einem anderen div. Ich möchte, dass die Seite nicht gescrollt wird und dieses Inhaltsdiv an den Rest des Fensters angepasst wird. Das Problem ist, dass ich, da sich die Höhe der Kopfzeile mit der Breite des Fensters ändert, den Inhaltsteil nicht in Pixel, Prozent oder etwas Konkretem festlegen kann.

Wie kann ich die Höhe des Inhaltsbereichs so einstellen, dass er sich dynamisch mit der Höhe der Kopfzeile ändert?

Ich kenne kein Javascript oder JQuery (ich weiß, ich weiß - ich sollte), aber im Idealfall wäre die Höhe des Inhalts div so eingestellt, dass sie ungefähr so ​​hoch ist: (Höhe des Ansichtsfensters) - (Höhe der Kopfzeile), aber ich Ich habe keine Ahnung, wie das geht.

Antworten auf die Frage(1)

Ihre Antwort auf die Frage