<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DivCSS实例：让页脚保持在未满屏页面的底部</title> <style> *{ margin:0; padding:0} #info{background:#33CCFF} #bottom{background:#FFCC00;width:100%;} </style> </head> <body> <div id="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> <div id="bottom">bottom</div> <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> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
您现在的位置： Photoshop资源站 >> 设计学院 >> 网站设计 >> DivCSS教程 >> 正文