css与js固定页面底部效果

Html部分：

代码如下

复制代码

<div id="wrap">
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
</div>CSS部分：
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;padding-bottom: 150px;} /* 要与footer的高度相同 */
#footer {position: relative;margin-top: -150px;height: 150px;clear:both;}
/*Opera 兼容*/
body:before {content:"";height:100%;float:left;width:0;margin-top:-32767px;}

可以看到，html部分与第一个方法的结构相同，只是多了一个header部分。这里需要注意的是这两种方法的header都需要加入到第一部分中。另外就是css的写法，写了针对opera的兼容，这里很惭愧我没有细细研究第一种方法的opera的兼容。有兴趣的朋友可以深究。

另外作者还写了针对ie的兼容：

代码如下	复制代码
<!--[if !IE 7]> <style type="text/css"> #wrap {display:table;height:100%} </style> <![endif]-->示例效果不多说了

看看另一个完整的实例

代码如下

复制代码

再推荐一个javascript实现的

代码如下

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<title>位置固定的工具条</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<script language="JavaScript">
/*
根据对象当前的属性，改变对象的显示状态
*/
function onClickDiv(DivId)
{
if(document.all[DivId].style.display=='none')
   { document.all[DivId].style.display=''; }
   else
   { document.all[DivId].style.display='none'; }
   return 0;
}
</script>
<style type="text/css">
html,body {margin:0; padding:0; overflow:hidden;height:100%; width:100%; text-align:left;}
.body {position:relative; width:100%; height:100%; overflow-y:scroll; overflow-x:auto; cursor:default;}
.tools {position:absolute; z-index:100; margin:0 auto; bottom:10px; left:10px; width:400px; height:20px; border:1px solid gray; background:#f7f7f7; text-align:left;}
#dy2 {
position: absolute;
height: 100px;
width: 200px;
background-color: #000066;
top: -100px;
z-index: 2;
}
#dy1 {
height: 25px;
width: 100px;
border: 1px solid #990000;
background-color: #FF9900;
text-align: left;
}
</style>
</head>
<body>

<div class="tools">
<Div Id="dy2" Style=display:none>隐藏</div>
<Div Id="dy1" Style=display onclick="return onClickDiv('dy2')">LINKTALK</div>
</div>
<div class="body">
<div style="height:1200px;background:#ffffff"></div>
</div>
</body>
</html>

更多详细内容请查看：http://www.zzzyk.com/js_a/75/e7c8b29a29b0f45432c2fd0b449c7a9f.htm

补充：网页制作,js教程