I have a unique challenge with an HTML page that is generated from two different frameworks. Due to the constraints of these frameworks, I can't make extensive modifications to the code itself. However, I do have the flexibility to manipulate the HTML using jQuery. The setup involves an application with a header and another reporting application that includes a subheader, content, and footer sections. My goal is to ensure that the document takes up the full viewport height, with the footer fixed at the bottom. Additionally, I need the content div to adjust its size dynamically, expanding or contracting as necessary, and enabling overflow so that scrolling is possible if the content exceeds the div's dimensions. While this solution works well in Chrome, I'm encountering issues with Internet Explorer where the document displays an additional scrollbar along with the expected one within the content frame.
Any assistance or guidance on resolving this issue would be greatly appreciated.
Check out the jsfiddle example here.
Code:
<body bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0">
<div style="width:100%;height:125px;background-color:#FFC;"></div>
</body>
<FORM NAME="rdForm" method="POST">
<MainBody>
<DIV id="divOuterContainer" CLASS="NF_display_table_container">
<DIV id="divHeader" CLASS="NF_top">
<SPAN>My SubHeader</SPAN>
</DIV>
<DIV id="divContentContainer">
<DIV id="divContent">
<DIV id="divInteractive" CLASS="NF_body2">
<div style="width:100%;height:1200px;background-color:#FCC;">
</div>
</DIV>
</DIV>
</DIV>
<DIV id="divFooter" CLASS="NF_bottom2">
<SPAN>My Footer
</SPAN>
</DIV>
</DIV>
</MainBody></FORM>
Javascript:
function reflow() {
var wsize = $(window).height();
var headers = $("#divContent").position().top;
var my_footer = $("#divFooter").height();
var new_height = Math.ceil(wsize - (headers + my_footer));
$("#divContent").css('height', new_height);
$("#divInteractive").css('height', new_height);
}
$(document).ready(
function () {
// Run immediately on DOM ready…
reflow();
// And again on page load and resize events
$(window).bind("load resize", reflow);
}
);
CSS Styles:
.hide {
display: none;
}
.NF_body2 {
overflow: auto;
}
.NF_top {
background-color:#CFF;
}
.NF_bottom2 {
background-color:#CFF;
}
.NF_container2 {
position: relative;
}