澳门鸿运国际,让你建站更便捷和轻松!
您当前的位置:鸿运娱乐 > 网页制作 > CSS教程
css与js固定页面底部效果
来源:澳门鸿运国际  时间:2012-03-07 15:22:51

文章介绍了利用纯css实现固定底部效果方法些案例是在浏览器兼容性方面下足了功夫。不多说,看代码部分,而javascript的也是基于了css方法。
-
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]-->示例效果不多说了
 


看看另一个完整的实例

 

代码如下
<style type="text/css" rel="stylesheet">
html,body{padding:0;margin:0;overflow:auto;height:100%;width:100%}
#wrapper{width:952px;margin:auto;display:block}
#presence{
        bottom:0;
        display:block;
        height:23px;
        line-height:23px;
        border:1px solid red;
        width:950px;
        z-index:100;
        position:fixed !important;
        >position:absolute;
        margin:0 auto;
}
#main{
        height:100%;
        overflow:auto;
        position:relative;
        width:100%;
}
#content{
        margin:0;
        min-height:100%;
        padding:0;
        position:relative;
        border:1px solid blue;
        height:3000px;
}
</style>
</head>
<body>
<div id="wrapper">
        <div id="presence">这里是底部</div>
        <div id="main">
                <div id="content">这里是内容</div>
        </div>
</div>
</body>
</html>


再推荐一个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>
 

责任编辑:风中的自由

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
CopyRight 2008-2009, favnav.com, Inc. All Rights Reserved
皖ICP备09015033号