解析DIV CSS实例：让页脚保持在未满屏页面底部

后浪云

2023-12-27

网站和优化

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

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

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

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

首先是JS脚本：

ExampleSourceCode

 
 
 
  
  
  functiontest(){  
  
  
  varinfoHeight=document.getElementById("info").scrollHeight;  
  
  
  varbottomHeight=document.getElementById("bottom").scrollHeight;  
  
  
  varallHeight=document.documentElement.clientHeight;  
  
  
   
  
  
  varbottom=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();

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

SourceCodetoRun

 
 
 
  
  
  <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  
  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  
  
  <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  
  
  <head> 
  
  
  <FCK:metahttp-equivFCK:metahttp-equiv="Content-Type" 
  
  
  content="text/html;charset=utf-8"></FCK:meta> 
  
  
  <title>Div CSS实例：让页脚保持在未满屏页面的底部</title> 
  
  
  <style> 
  
  
  *{margin:0;padding:0}  
  
  
  #info{background:#33CCFF}  
  
  
  #bottom{background:#FFCC00;width:100%;}  
  
  
  </style> 
  
  
  </head> 
  
  
  <body> 
  
  
  <dividdivid="info"> 
  
  
  2<br/>2<br/>2<br/>2<br/>2<br/><br/>2<br/>2<br/>2<br/> 
  
  
  2<br/>2<br/><br/>2<br/>20000</div> 
  
  
  <dividdivid="bottom">bottom</div> 
  
  
  </body> 
  
  
  </html>

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

【编辑推荐】

DIV CSS实例教程要点总结
JavaScript动态创建div属性和样式
CSS中border和clear两大属性用法揭秘
Div CSS实例教程：页面制作方法全程指导
解读DIV CSS网页布局中CSS无效十个原因

作者：后浪云

链接：https://www.idc.net/help/396974/

文章版权归作者所有，未经允许请勿转载。

THE END