(1) Try the following as your 'index.html' file. It uses a fixed height header and footer (which both span the entire width of the page) and a fixed width menu. The dimensions of these elements can all be changed in the CSS on the page. The gallery will always take up the remainder of the space on the page no matter what the size of the user's browser window is.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
body {
margin: 0px;
}
body, html {
height: 100%;
overflow: hidden;
}
#header {
height: 50px;
width: 100%;
background-color: #222222;
}
#footer {
height: 50px;
width: 100%;
background-color: #222222;
}
#wrap {
width: 100%;
}
#menu {
height: 100%;
width: 100px;
background-color: #222222;
float: left;
}
#gallery {
height: 100%;
float: right;
}
</style>
<script src="jbcore/juicebox.js"></script>
<script>
function doLayout() {
var winHeight, winWidth, headerWidth;
winHeight = window.innerHeight ? window.innerHeight : $(window).height();
winWidth = window.innerWidth ? window.innerWidth : $(window).width();
headerHeight = $('#header').outerHeight();
footerHeight = $('#footer').outerHeight();
menuWidth = $('#menu').outerWidth();
$('#wrap').height(parseInt(winHeight) - parseInt(headerHeight) - parseInt(footerHeight));
$('#gallery').width(parseInt(winWidth) - parseInt(menuWidth));
}
$(document).ready(function () {
doLayout();
$(window).bind('resize', doLayout);
new juicebox({
containerid : 'juicebox-container',
galleryWidth: '100%',
galleryHeight: '100%'
});
});
</script>
</head>
<body>
<div id="header"></div>
<div id="wrap">
<div id="menu"></div>
<div id="gallery">
<div id="juicebox-container"></div>
</div>
</div>
<div id="footer"></div>
<!--END JUICEBOX EMBED-->
</body>
</html>(2) Try using the code above (inserting your own header, footer and menu content) and upgrade your gallery from Juicebox-Pro v1.2.0 to the latest version (v1.3.1) by following the instructions here to see if this fixes the problem.