DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 純css 實現footer 一直在頁面底部,不隨頁面滾動
純css 實現footer 一直在頁面底部,不隨頁面滾動
編輯:CSS詳解     
CSS的簡單在於它易學,CSS的困難在於尋找更好的解決方案。在CSS的世界裡,似乎沒有完美這種說法。所以,現在介紹的CSS絕對底部,只是目前個人見過的方案中比較完美的吧。

今天這個案例,我們希望footer一直在頁面底部,來看看解決方案吧

CSS

復制代碼代碼如下:
Html, body, #sticker {height: 100%;}
body > #sticker {height: auto; min-height: 100%;}
#stickerCon {padding-bottom: 40px;}
#footer {margin-top:-40px; height: 40px; width: 100%; text-align: center; line-height: 40px; color: #ABA498; font-size: 12px; background: #fafafa; border-top:1px solid #E7E7E7;}

Html


復制代碼代碼如下:
<div id="sticker">
<div id="stickerCon"></div>
</div>
<div id="footer">footer</div>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved