I would like to create a script in JavaScript language so that:
-
if page fills whole window of the browser, the division with footer is behind the rest of page normally;
-
if page does not fill whole window of the browser, the division is at the bottom of the window.
I have made this script (http://szmitek.winweb.pl/footer.js). This is whole code of this script:
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
// 'main' - id of division with everything beside footer (above footer)
var contentHeight = document.getElementById('main').offsetHeight;
//'footer' - id of division with footer
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
}
else {
footerElement.style.top = '0px';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
At pages of my Web site, I have used it in this way:
<!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">
...
<link href="../format.css" rel="stylesheet" type="text/css" />
...
<script type="text/javascript" language="javascript" src="../footer.js" mce_src="../footer.js"></script>
...
<div id="main">
...
</div>
// '<div id="footer">' - the footer
<div id="footer"><table cellpadding="0px" cellspacing="0px" class="e-mail"><tr><td><div class="e-mail">
<p><span>E-mail:</span> <a href="mailto:szmitek@hotmail.com">szmitek@hotmail.com</a></p></div></td>
</tr></table><p>
...
</p></div>
...
The problem is if page does not fill whole window of the browser (like my home page http://szmitek.winweb.pl normally):
- the table in the footer (marked with green above) is corectly displayed at the bottom of the browser window
- but a paragraph under this table (marked with red above) is visible (shows) after scrolling down.
I want the page to be displayed with the paragraph under the table in footer without scrolling down
if if page does not fill whole window of the browser. How to do that?
This is extact of stylesheet used on these pages (http://szmitek.winweb.pl/format.css):
body {
margin: 0;
margin-top: 0;
background-color: #FFFFFF;
}...
p {
font-family: Arial;
font-size: medium;
margin-left: 10px;
margin-right: 10px;
}...
div#footer {
position: relative;
background-color: black;
margin: 0px;
}
div#footer p {
color: white;
margin: 0;
margin-top: 0px;
margin-left: 10px;
margin-right: 10px;
}
table.e-mail {
width: 100%;
margin-bottom: 0px;
height: 31px;
background-image: url('e-mail.png');
border: 0px;
}
div.e-mail p {
margin: 0;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 0px;
}...
I am asking for help politely.