Here's the hacky solution, which I'll use for now; however, a better one would be worth working towards. To be fair, this works excellently in Firefox/OSX, and so is fine whilst I am in a development phase.
New HTML:
<!-- Here's the panel system -->
<div id="layout-container" style="height:700px;">
<div id="layout" style="width: 100%; height: 100%;"></div>
</div>
Additional JavaScript, executed prior to the code in the question (props to this answer for the resize stuff):
function setLayoutContainerHeight()
{
// Get top position of layout container, subtract from screen height, subtract a bit for padding
var y = $('#layout-container').position().top;
var layoutHeight = $(window).height() - y - 10;
$('#layout-container').css('height', layoutHeight + 'px');
}
// Whenever the window changes size, recalculate the layout container height
setLayoutContainerHeight();
$(window).resize(setLayoutContainerHeight);
Update: the author this library has very kindly offered several ways to achieve a full-height layout, all of which are better than my hack!