¿Configurar div para rellenar el resto de la altura dinámicamente?
Asi que. Mi código es algo así como
<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>
Tengo un svg en el encabezado que he establecido para que coincida con el ancho de la ventana y las escalas de altura para preservar el svg. Luego tengo el resto de la página en otro div. Me gustaría que la página no se desplace y que este div contenido se llene para ajustarse al resto de la ventana. El problema es que, dado que la altura del encabezado cambia con el ancho de la ventana, no puedo configurar el div de contenido en píxeles o en porcentaje, ni nada concreto.
¿Cómo puedo configurar la altura del div de contenido para que cambie dinámicamente con la altura del encabezado?
No sé Javascript o JQuery (lo sé, lo sé, debería), pero lo ideal sería que la altura del div de contenido fuera algo así como la altura: (altura de la ventana gráfica) - (altura del encabezado), pero No tengo ni idea de cómo hacer esto.