您的位置：首页 > Web前端 > JavaScript

[JavaScript]让footer总是停留在页面的底部(footer all the way at the bottom of the page)

2005-11-24 16:53 585 查看
在网页的底部总是保留着公司的版本信息，如何是这部分信息来实现呢？下面的一段javascript演示了如何让footer总是停留在页面的底部。这段代码我在实际使用的时候不是特别的完美，在包含有其他javascript控制的页面和控件的时候会出现重叠的现象，这是因为没有对页面的Body进行onresize和onload操作，希望大家看后有解决的方法）

<HTML>
<HEAD>
<title>让footer总是停留在页面的底部</title>

<script language="javascript">
<!--
function moveFooter() {
var iBottom = 0;

if (document.all) {
if (parseInt(document.body.scrollHeight) > parseInt(document.body.clientHeight)) {
iBottom = parseInt(document.body.scrollHeight);
}
else iBottom = parseInt(document.body.clientHeight);
document.all["lyfooter"].style.pixelTop = iBottom - parseInt(document.all["lyfooter"].style.height);
document.all["lyfooter"].style.visibility = "visible";
}
else if (document.layers) {
if (document.height > self.innerHeight) {
iBottom = document.height;
}
else iBottom = self.innerHeight;
document.layers["lyfooter"].top = parseInt(iBottom - document.layers["lyfooter"].document.height);
document.layers["lyfooter"].visibility = "visible";
}
else if (document.getElementById) { //NS6
if (document.height > self.innerHeight) {
iBottom = document.height;
}
else iBottom = self.innerHeight;
document.getElementById("lyfooter").style.top = (parseInt(iBottom - parseInt(document.getElementById("lyfooter").style.height))) + "px";
document.getElementById("lyfooter").style.visibility = "visible";

}

}
//-->
</script>
</HEAD>

<body MS_POSITIONING="GridLayout" onresize="moveFooter()" onload="moveFooter()">
<form id="Form1" method="post">
<!----bottom part--------->
<div id="lyfooter" style="position:absolute;left:0px;top:100px;height:19px;z-index:2;visibility:hidden;">
<table border="0" width="100%" cellspacing="0" cellpadding="3">
<tr>
<td width="100%" bgColor="#319a63" class="footnote"><font color="#ffffff" size="2px" face="Verdana, Arial, Helvetica, sans-serif">©
2005 ABCDE, Inc.</font></td>
</tr>
</table>
</div>
<!----/bottom part--------->
</form>
</body>
</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航