i found a helpful code snippet on this Stack Overflow post
<script type='text/javascript'>
$(function(){
$('#center').css({'height':(($(window).height())-162)+'px'});
$(window).resize(function(){
$('#center').css({'height':(($(window).height())-162)+'px'});
});
});
</script>
the code works well for resizing the div height when the window is resized, but it doesn't account for scrolling which means the height won't change when you scroll down
i'm looking for a way to set the height based on the whole content rather than just the window size
ANSWER replace 'window' with 'document' to get the full content size
<script type='text/javascript'>
$(function(){
$('#center').css({'height':(($(document).height())-162)+'px'});
$(window).resize(function(){
$('#center').css({'height':(($(document).height())-162)+'px'});
});
});
</script>