I notice that your gallery has a height of 88%. I think it would be difficult to get a clean working solution (with either CSS or JavaScript) using such a gallery height. The suggestions below use a gallery height of 100% so that the gallery fills its container and when JavaScript is used to determine the height of the container, you know that the gallery is the same height.
Take a look at the Using a Resizable Gallery with a Header support section.
The View Resizable Gallery with Top Menu Example has a header and a footer (both with fixed heights) and the gallery takes up the remainder of the available space (no matter what size the browser window is) without any scrollbars.
You can view the source of the web page in your browser and copy/modify the code to suit your own needs (removing the footer, changing the header content and swapping the sample gallery with your own).
The example also switches between galleries (something you might not need) and uses an external CSS file.
Here is a single file solution that you might like to use. (The code should be fairly easy to follow.)
To see it in action, create a sample gallery with JuiceboxBuilder-Pro (just use all default settings) and use the following code as the gallery's 'index.html' file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {
background-color: #222222;
margin: 0px;
}
#header {
background-color: #222222;
color: #666666;
font-family: sans-serif;
font-size: 20px;
height: 50px;
padding: 10px 0px;
text-align: center;
width: 100%;
}
#wrap {
width: 100%;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb;
function doLayout() {
var windowHeight = parseInt(window.innerHeight ? window.innerHeight : $(window).height());
var headerHeight = parseInt($('#header').outerHeight(true));
var galleryHeight = windowHeight - headerHeight;
$('#wrap').height(galleryHeight);
if (jb) {
var galleryWidth = parseInt($('#wrap').innerWidth());
jb.setGallerySize(galleryWidth, galleryHeight);
}
}
$(document).ready(function() {
doLayout();
$(window).resize(doLayout);
jb = new juicebox({
containerId: "juicebox-container"
});
});
</script>
<title>Test</title>
</head>
<body>
<div id="header">
<span>Header</span>
</div>
<div id="wrap">
<div id="juicebox-container"></div>
</div>
</body>
</html>