在网页的底部总是保留着公司的版本信息，如何是这部分信息来实现呢？下面的一段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">&copy; 
                                    2005 ABCDE, Inc.</font></td>
      </tr>
    </table>
</div>
<!----/bottom part--------->
        </form>
    </body>
</HTML>

转载于:https://www.cnblogs.com/rippleyong/archive/2005/11/24/283739.html

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

  1. footer属性css,CSS基础-footer元素始终粘在浏览器底部的四种方法

    本文介绍底部footer元素如何始终粘在浏览器底部.当内容container足够多.可以撑开一屏的时候,底部footer紧跟在内容container后边:而内容container不够多.不足以撑开一屏 ...

  2. 前端页面如何引入公用的页面header和footer

    很多时候我们做网站开发的时候会遇到一个比较有趣的问题,那就是我们每个页面使用的footer和header,于是当然我们有办法在每个页面都相同的html标签,显然这样代码的复用程度是很低的,我们需要想到 ...

  3. 将页脚保持在页面的底部——Javascript+Css实现

    功能:无论将浏览器拖大或拉小,将页脚DIV块保持在页面的底部 1.将Javascript代码和DIV/CSS代码写在同一个文件里: <!DOCTYPE html PUBLIC "-// ...

  4. 【javascript 动态添加数据到 HTML 页面】

    今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...

  5. 如何将footer标签固定在底部_如何让footer标签置于页面最底部

    这次给大家带来如何让footer标签置于页面最底部,让footer标签置于页面最底部的注意事项有哪些,下面就是实战案例,一起来看一下. 需求:有时候,当页面内容较短,撑不开浏览器高度,但是又希望foo ...

  6. 引入html页面比较,前端页面如何引入公用的页面header和footer

    很多时候我们做网站开发的时候会遇到一个比较有趣的问题,那就是我们每个页面使用的footer和header,于是当然我们有办法在每个页面都相同的html标签,显然这样代码的复用程度是很低的,我们需要想到 ...

  7. JavaScript实现的转盘抽奖html页面前端源码

    大家好,今天给大家介绍一款,JavaScript实现的转盘抽奖html页面前端源码 (图1).送给大家哦,获取方式在本文末尾. 图1 点击中间的开始按钮,就可以转动转盘(图2) 图2 源码完整,需要的 ...

  8. JavaScript如何查找和访问HTML页面中的HTML元素

    JavaScript如何查找和访问HTML页面中的HTML元素 HTML语言中,全部是由标签(标记.tag)组成的.在浏览器内部解析HTML标记时,会转换为成具有特定结构的HTML文档对象模型,这个对 ...

  9. Gridsome(四)：完善简易博客网站 (内有 footer 不满一屏时在最底部，超出一屏时在页面最底部 解决方案)

    footer 置于页面的底部 利用绝对定位 /* 文件目录:src/layouts/Defaults.vue */.footer {color: #c5c5c5;position: absolute; ...

最新文章

  1. python中数据类型为list_python_数据类型_list
  2. phpsso.php 注入漏洞,PHPCMS各种注入漏洞补丁
  3. hdu 2544（最短路径）
  4. MySQL / 索引模型
  5. js html转义字符串,js中html拼接特殊字符转义
  6. apimac版 java_jdk1.8 mac官方下载-Java SE Development Kit 8 mac下载8u181 官方最新版__西西软件下载...
  7. Android仿人人客户端（v5.7.1）——对从服务器端（网络）获取的图片进行本地双缓存处理（编码实现）...
  8. isight2019安装教程_abaqus2019软件下载+安装教程
  9. tf 文字识别 多个文字 data 数据流
  10. android webview加载图片不显示,解决android webview中图片不显示问题
  11. php 解析mpp 格式文件
  12. 爱思国际获戈壁创投数百万美元Pre-A 轮融资，意做菲律宾的分众传媒...
  13. 关于python的环境配置和编辑器Geany的使用中遇见的问题及解决方法
  14. (扩展)BSGS与高次同余方程
  15. 寒假总结 22-1-9
  16. 樊登读书会终身成长读后感_《终身成长》读后感三篇
  17. 广西软件性能测试,道亨软件承建广西智慧水库标杆项目
  18. 第10章 51PC实物制作
  19. 武汉科技大学计算机研究生在哪个校区,武汉科技大学在职研究生在哪个校区
  20. 师范生实习手册写作【模板】

热门文章

  1. c++编译时候fatal error C1075: end of file found before the left brace '{' at
  2. python返回长度值_Python 文件 truncate() 方法(截断返回截取长度)
  3. linux系统嵌入式编译环境,Ubuntu 12.04嵌入式交叉编译环境arm-linux-gcc搭建过程图解...
  4. java对两个表进行排序_Excel工作簿中多个worksheet工作表，如何对工作表进行排序？...
  5. 安宁计算机学院,滁州学院张燕咏、安宁两位教授应邀来我院指导工作
  6. oracle 启用闪回数据库,如何启用Oracle10g闪回数据库特性
  7. 机器人峰会王伟_【“峰”景独好】大美中国探春中国机器人峰会举办地——浙江宁波余姚...
  8. layui分页limit不显示_【图片】新手 分页显示不了呀【layui吧】_百度贴吧
  9. 2021Golang技术基础知识及学习路线图
  10. 使用微信开发者工具添加小程序底部导航栏报错