I'm having trouble adjusting the height of my div to be equal to the window height minus the combined heights of the header and footer. I also want the contents inside the div to have a scroll bar if they exceed the specified height limit.
While my current setup works well in most cases, when the content exceeds the height limit, instead of scrolling, the div just stretches beyond its set height. Can someone please help me identify what I am missing here? Thank you in advance!
$("#p_body").height($(window).height() - ($("#p_header").height() + $("#p_footer").height()) );
$("#content_body").height($("#p_body").height() - ($("#content_header").height() + 10) );
Page Structure:
<div id="p_header"></div>
<div id="p_body">
<div id="content_header"></div>
<div id="content_body" style="overflow-y:scroll;"></div>
</div>
<div id="p_footer"></div>