How to vary height of div based on browser window width
===

I am looking to achieve the effect of a 'fullscreen' photo gallery which fills the screen but ALSO allows fixed-height content above, and content that you can scroll to below.

I know this is a little abstract, so here's an example: http://pixelthemes.net/immersion/

 - Notice how you can resize the browser window, but the almost-fullscreen gallery 'sticks' to the bottom of the browser window, whilst still allowing you to use the scroll bar to see what's below it
 - Notice how the above behaviour is consistent even as you resize the browser window

The above example uses the jquery gallery "Supersized" but I will be using Galleria (latest version has a 'responsive' option allowing dynamic resizing of gallery stage).

Of course, with a fullscreen gallery, there will always be crop - however this is not an issue for me.

I presume this isn't possible with pure CSS, so how do I achieve this using existing jquery plugins?

Better still, I've a feeling this can be done using Galleria API (http://galleria.io/docs/api/methods/#display) but I'm not experienced enough to know exactly how.