美图齐众专注资阳网站设计 资阳网站制作 资阳网站建设
资阳网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

解析DIVCSS实例:让页脚保持在未满屏页面底部

这里和大家分享一下DIV CSS实例:如何让页脚保持在未满屏页面的底部,在DIV CSS布局过程中内容不超过一屏的情况下,当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。

创新互联主要从事网站建设、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务文成,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

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

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

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

首先是JS脚本:

ExampleSourceCode

 
 
 
  1. functiontest(){
  2. varinfoHeight=document.getElementById("info").scrollHeight;
  3. varbottomHeight=document.getElementById("bottom").scrollHeight;
  4. varallHeight=document.documentElement.clientHeight;
  5. varbottom=document.getElementById("bottom");
  6. if((infoHeight+bottomHeight)
  7. bottom.style.position="absolute";
  8. bottom.style.bottom="0";
  9. }else{
  10. bottom.style.position="";
  11. bottom.style.bottom="";
  12. }
  13. setTimeout(function(){test();},10);
  14. }
  15. test();

 查看一下DIV CSS实例的运行效果:

SourceCodetoRun

 
 
 
  1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. content="text/html;charset=utf-8">
  3. Div CSS实例:让页脚保持在未满屏页面的底部
  4. 2
    2
    2
    2
    2

    2
    2
    2
  5. 2
    2

    2
    20000
  • bottom
  • [可先修改部分代码再运行查看效果]


    文章名称:解析DIVCSS实例:让页脚保持在未满屏页面底部
    本文来源:http://www.zsjierui.cn/article/dhodcig.html

    其他资讯