当前位置:首页 > 设计在线 > 网页设计 > CSS/Xhtml > Div+CSS实例:让页脚保持在未满屏页面的底部

Div+CSS实例:让页脚保持在未满屏页面的底部

点击次数:24 次 发布日期:2008-12-01 17:28:12 作者:源代码网
源代码网推荐  Div+CSS实例:让页脚保持在未满屏页面的底部

  在内容不超过一屏的情况下,当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。

  当内容多出一屏时,他显示在网页的最下边,而不是窗口的最下边;测试了一下,还可以,在IE6、IE7、FF等都没有问题!窗口缩小时也没有问题!

  首先是JS脚本:

  Example Source Code
  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();

源代码网供稿.
网友评论 (0)
会员中心
设计在线
本站推荐
设计在线之精华