css與js固定頁面底部效果

最後更新：2017-08-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

文章介紹了利用純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的相容：

代碼如下
示例效果不多說了

看看另一個完整的實例

代碼如下
<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;
backgroun d-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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More