Hello,
I have tried some css & html methods to place the footer at the bottom of the page no matter at which height it will be after the javascript files will run. But I cannot do it.
I tried then to adjust the position of the footer dynamically after the window has loaded and the footer is placed indeed at the end of the document, but if the document gets bigger, the footer doesn't go lower.
Specifically:
FILE html_test.html
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>test</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><link rel="stylesheet" href="css_test.css"/><!--Include other scripts that produce code dynamically into the body--><script type="text/javascript" src="footer.js"></script></head><body><div id="body"><!-- HTML PRODUCED DYNAMICALLY --></div><div id="footer" class="hidden">FOOTER</div></body></html>
FILE footer.js
Code:
function getDocHeight(){
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
$(window).load(function(){
document.getElementById("footer").style.top=getDocHeight()+40+"px";
document.getElementById("footer").style.display="block";
});
FILE css_test.css
Code:
.hidden{display:none;}
#body {
min-height: 100%;
height: auto !important;
height: 100%;
padding:10px;
padding-bottom:20px; /* Height of the footer */
}
#footer{
width: 100%;
position:absolute;
height:20px;
}
With this frame of code, I succeed to place the footer at the end of the page when it is not bigger than the screen. But when the HTML code that is produced dynamically, gets more and more and the height of the body exceeds the height of the screen, then the footer remains at the end of the "first screen".
I thought that I have to to run the js file after all others have finished, so as to get the updated height of the document. So, I include the footer.js at last of all the other js files, but it didn't work.
How can I fix it ?
Thank you !!!
I cannot make the sticky footer work. The Footer appears at the bottom of the screen, but not at the end of the dynamically created document. Any ideas?!
Congrats for your wedding !
Last edited by exquisitenick; 06-30-2011 at 01:03 PM.
sticky footer cannot work if there is inside a div with absolute position
Finally, I found what is wrong with the sticky footer but I still cannot find a solution.
If inside the <div class='wrapper'> there is another div with absolute position, the sticky footer cannot work and the footer is placed at the end of the screen, instead of the end of the document.
html, body {
height: 100%;
}
.wrapper {
color: black;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
#container{
position: absolute; /******** If position is set,then the footer cannot be placed at the end of the document. *******/
left:200px;
top:10px;
border:2px solid #597FAA;
width:500px;
}
Reply With Quote
Bookmarks