I'm trying to embed Juicebox galleries on my website, while keeping them as immersive as possible, and yet being able to keep them in line with the website's overall look and theme.

I thought a quick sketch would make what I'm wanting to do easier to understand:
See here.

So as you can see the idea is for the footer not to be visible, unless you scroll down, and for the Juicebox gallery to go from the bottom of the navigation bar (and it's margin), which is about 100px, to the bottom of the browser viewport, which is different for every user..

So far, I tried nesting the embed code, which I set to 100% for both height and width, inside another div for which I typed up the following jquery:

            function immersive() {
                var viewportHeight = parseInt($(window).height());
                var calculatedHeight = viewportHeight - 100 + "px";
                $('div.gallery-container').css('height', calculatedHeight);
            }
            $(document).ready(function() {
                immersive();
                $(window).bind('resize', immersive);
            });

The problem is, whenever I try to use this, I'm getting a height of 100% for the Juicebox...