Menu
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
[code=html]
<!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 !!!