js让一行页脚保持在底部

 更新时间:2008年04月11日 19:46:46   作者:  
所谓保持在底部就是: 在内容不超过一屏的情况下, 当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。当内容多出一屏时,他显示在网页的最下边,而不是窗口的最下边;
测了一下,还可以,在IE6、IE7、FIREOFX等都没有问题! 窗口缩小时也没有问题!

复制代码 代码如下:

<script language="JavaScript" type="text/javascript">
function test(){
 var infoHeight = document.getElementById("info").scrollHeight;
 var bottomHeight = document.getElementById("bottom").scrollHeight;
 var allHeight = document.documentElement.clientHeight;

 var bottom = document.getElementById("bottom");
 if((infoHeight + bottomHeight) < allHeight){
  bottom.style.position = "absolute";
  bottom.style.bottom = "0";
 }else{
  bottom.style.position = "";
  bottom.style.bottom = "";
 } 

 setTimeout(function(){test();},10);
}
test();
</script>


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

相关文章

  • 鼠标滑过出现预览的大图提示效果

    鼠标滑过出现预览的大图提示效果

    这篇文章主要介绍了如何实现鼠标滑过出现预览的大图提示效果,需要的朋友可以参考下
    2014-02-02
  • 利用JS定时器实现元素移动

    利用JS定时器实现元素移动

    这篇文章主要为大家详细介绍了利用JS定时器实现元素移动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • fullPage.js和CSS3实现全屏滚动效果

    fullPage.js和CSS3实现全屏滚动效果

    这篇文章主要为大家详细介绍了fullPage.js和CSS3实现全屏滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 判断访客终端类型集锦

    判断访客终端类型集锦

    本文给大家讲解的是使用php和javascript实现的判断访客终端类型的方法集锦,十分的简单实用,有需要的小伙伴可以参考下。
    2015-06-06
  • 微信小程序自定义底部、顶部、中间、左边及右边弹窗

    微信小程序自定义底部、顶部、中间、左边及右边弹窗

    这篇文章主要给大家介绍了关于微信小程序自定义底部、顶部、中间、左边及右边弹窗的相关资料,弹窗是小程序中非常重要的一种互动方式,比如用户注册时错误提示、优惠券领取提示、签到成功提示等等,需要的朋友可以参考下
    2023-11-11
  • Javascript的表单与验证-非空验证

    Javascript的表单与验证-非空验证

    JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。本文给大家介绍javascript的表单与验证-非空验证,对javascript表单验证相关知识感兴趣的朋友一起学习吧
    2016-03-03
  • webpack proxy如何解决跨域问题

    webpack proxy如何解决跨域问题

    webpack proxy,即webpack提供的代理服务,基本行为就是接收客户端发送的请求后转发给其他服务器,本文给大家介绍了webpack proxy如何解决跨域问题,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • JavaScript实现旋转木马轮播图

    JavaScript实现旋转木马轮播图

    这篇文章主要为大家详细介绍了JavaScript实现旋转木马轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • js清空表单数据的两种方式(遍历+reset)

    js清空表单数据的两种方式(遍历+reset)

    这篇文章主要介绍了js清空表单数据的两种方式(遍历+reset),需要的朋友可以参考下
    2014-07-07
  • javascript获取重复次数最多的字符

    javascript获取重复次数最多的字符

    本文给大家讲述的是使用javascript实现获取重复次数最多的字符,代码很简单,有需要的小伙伴可以参考下。
    2015-07-07

最新评论