Bootstrap 粘頁腳效果

2019-11-20 10:20:19

字體：大中小

來源：轉載

供稿：網友

Bootstrap 粘頁腳，說得具體一點就是“將固定高度的頁腳緊貼頁面底部”。由于項目的實際情況和模板有所區別，所以參照模板，小編不能確保快速的完成“粘頁腳”的效果，那么還是要給大家分享本教程，寫的不好還請各位大俠海涵！

一、頁面效果

這里寫圖片描述

頁面非常簡單，注意亮線為火狐邊緣，可以很清楚的看到，頁腳灰色部分沉浸在頁面底部。

二、實例講解

①、代碼

<!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"><link type="text/css" rel="stylesheet" href="/ymeng/components/bootstrap/css/bootstrap.css" /><style type="text/css">html,body {height: 100%;}#wrap {min-height: 100%;height: auto !important;margin: 0 auto -200px;}#pushheight: 200px;}.footer {border-top: 1px solid #e5e5e5;color: #777;padding: 19px 0;background-color: #f5f5f5;}</style><head><title>發布項目</title></head><body><div id="wrap"><div class=" container project_choose"><div class="row"><div class="col-md-5 project_general"><span class="f14">我有一個夢想，有創意項目，有創意產品，點擊發布回報</span><div class="blank20"></div><div><a type="button" class="btn btn-danger" href="/ymeng/deal/initDealCaluseConfirm">立即發布產品</a></div></div><div class="col-md-2"></div><div class="col-md-5 project_agency"><span class="f14">我有創業夢想，有融資需求，點擊發布股權</span><div class="blank20"></div><div><button type="button" class="btn btn-primary">立即發股權</button></div></div></div></div><div id="push"></div></div><div class="footer "><div class="container"><div class="row footer-top"><div class="col-sm-6 col-lg-6"><h4></h4><p>歡迎你加入，這里有你想要的.</p></div><div class="col-sm-6 col-lg-5 col-lg-offset-1"><div class="row about"><div class="col-xs-3"><h4>關于</h4><ul class="list-unstyled"><li><a href="">關于我們</a></li></ul></div><div class="col-xs-3"><h4>聯系方式</h4><ul class="list-unstyled"><li><a target="_blank" title="云夢網官方微博" href="">新浪微博</a></li><li><a href="">電子郵件</a></li></ul></div></div></div></div><hr><div class="row footer-bottom"><ul class="list-inline text-center"><li>Copyright ©2016. n 洛陽限公司 Software All Rights Reserved.</li></ul></div></div></div></body></html>

②、頁面body布局

<body><div id="wrap"><div class=" container"></div><div id="push"></div></div><div class="footer "></div></body>

body中第一級元素，兩個div，分別為wrap和footer

第二級元素中，兩個div，分別為container和push（如果你忘記了push這個div，ok，你的頁面在縮放時會錯亂的）

這里寫圖片描述

以上列出的元素自然粘頁腳必不可少的。

③、css分析

html,body {height: 100%;}#wrap {min-height: 100%;height: auto !important;margin: 0 auto -200px;}#pushheight: 200px;}.footer {border-top: 1px solid #e5e5e5;color: #777;padding: 19px 0;background-color: #f5f5f5;}

html,body的高度必須是100%，也就是充滿瀏覽器窗口高度

#wrap div的min-height必須是100%，height呢，就自動適應。

關鍵點在于margin，top的外邊距為0，而bottom的外邊距則為-200px。

注意，就是-200px，理論上是footer高度（你可以通過firebug調試最佳高度）的負數，這一點也很關鍵！為什么要為負數呢？因為warp的高度本來就是100%，為負數的話，就可以為footer留出顯示完整的高度，否則footer將出現在頁面滾動條下部。

#push元素，頁面完整顯示的時候，似乎看不出來push元素的作用，但當你頁面縮放時，如果沒有push，footer元素就會和container中的元素重合，之前圖上也有說明，那么其具體作用如何呢？

這里寫圖片描述