解析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.gawzjz.com/qtweb/news5/191305.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

    猜你还喜欢下面的内容

    品牌网站设计知识

    同城分类信息