I've encountered an issue with the footer DIV not moving to the bottom of the page after new content is added to the above DIV using AJAX. Initially, when the page loads, the footer is at the bottom, but after the AJAX call inserts a lot of content, the footer remains in place and doesn't update itself.
Does anyone know how to resolve this? I am using jQuery to insert the AJAX content after the page has loaded.
I have already attempted using "position:absolute; bottom:0; left:0" on the footer div, but it still doesn't move after the AJAX call.
Thank you in advance!
<body style="width:100%; height:100%;" onload="displayContent()">
<div id="main" style="width:100%; height:100%;" >
<div id="header" style="width:100%; height:10%;">
<div style="width:100%; height:100%;">
<div style="display:inline; float:left; width:10%; height:100%;">Logo</div>
<div style=" display:inline; float:right; width:90%; height:100%;">Navigation Links</div>
</div>
</div>
<div style="width:100%; height:5%;">
Navigation links go here
</div>
<div id="body" style="width:100%; height:75%;">
<div id="content" style="display:inline; float:left; width:70%; height:100%;">Main content from AJAX call after page onload goes here</div>
<div style="display:inline; float:right; width:30%; height:100%; background:red;">Other stuff here</div>
</div>
<div id="footer" style="width:100%; height:10%;">
FOOTER NEEDS TO UPDATE ITSELF AFTER AJAX CALL
</div>
</div>
</body>