Bootstrap 粘頁(yè)腳效果
Bootstrap 粘頁(yè)腳,說(shuō)得具體一點(diǎn)就是“將固定高度的頁(yè)腳緊貼頁(yè)面底部”。由于項(xiàng)目的實(shí)際情況和模板有所區(qū)別,所以參照模板,小編不能確??焖俚耐瓿伞罢稠?yè)腳”的效果,那么還是要給大家分享本教程,寫(xiě)的不好還請(qǐng)各位大俠海涵!
一、頁(yè)面效果
頁(yè)面非常簡(jiǎn)單,注意亮線為火狐邊緣,可以很清楚的看到,頁(yè)腳灰色部分沉浸在頁(yè)面底部。
二、實(shí)例講解
①、代碼
<!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; } #push height: 200px; } .footer { border-top: 1px solid #e5e5e5; color: #777; padding: 19px 0; background-color: #f5f5f5; } </style> <head> <title>發(fā)布項(xiàng)目</title> </head> <body> <div id="wrap"> <div class=" container project_choose"> <div class="row"> <div class="col-md-5 project_general"> <span class="f14">我有一個(gè)夢(mèng)想,有創(chuàng)意項(xiàng)目,有創(chuàng)意產(chǎn)品,點(diǎn)擊發(fā)布回報(bào)</span> <div class="blank20"></div> <div> <a type="button" class="btn btn-danger" href="/ymeng/deal/initDealCaluseConfirm">立即發(fā)布產(chǎn)品</a> </div> </div> <div class="col-md-2"></div> <div class="col-md-5 project_agency"> <span class="f14">我有創(chuàng)業(yè)夢(mèng)想,有融資需求,點(diǎn)擊發(fā)布股權(quán)</span> <div class="blank20"></div> <div> <button type="button" class="btn btn-primary">立即發(fā)股權(quán)</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>關(guān)于</h4> <ul class="list-unstyled"> <li> <a href="">關(guān)于我們</a> </li> </ul> </div> <div class="col-xs-3"> <h4>聯(lián)系方式</h4> <ul class="list-unstyled"> <li> <a target="_blank" title="云夢(mèng)網(wǎng)官方微博" 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 洛陽(yáng)限公司 Software All Rights Reserved.</li> </ul> </div> </div> </div> </body> </html>
②、頁(yè)面body布局
<body> <div id="wrap"> <div class=" container"> </div> <div id="push"></div> </div> <div class="footer "> </div> </body>
body中第一級(jí)元素,兩個(gè)div,分別為wrap和footer
第二級(jí)元素中,兩個(gè)div,分別為container和push(如果你忘記了push這個(gè)div,ok,你的頁(yè)面在縮放時(shí)會(huì)錯(cuò)亂的)
以上列出的元素自然粘頁(yè)腳必不可少的。
③、css分析
html,body { height: 100%; } #wrap { min-height: 100%; height: auto !important; margin: 0 auto -200px; } #push height: 200px; } .footer { border-top: 1px solid #e5e5e5; color: #777; padding: 19px 0; background-color: #f5f5f5; }
html,body的高度必須是100%,也就是充滿瀏覽器窗口高度
#wrap div的min-height必須是100%,height呢,就自動(dòng)適應(yīng)。
關(guān)鍵點(diǎn)在于margin,top的外邊距為0,而bottom的外邊距則為-200px。
注意,就是-200px,理論上是footer高度(你可以通過(guò)firebug調(diào)試最佳高度)的負(fù)數(shù),這一點(diǎn)也很關(guān)鍵!為什么要為負(fù)數(shù)呢?因?yàn)閣arp的高度本來(lái)就是100%,為負(fù)數(shù)的話,就可以為footer留出顯示完整的高度,否則footer將出現(xiàn)在頁(yè)面滾動(dòng)條下部。
#push元素,頁(yè)面完整顯示的時(shí)候,似乎看不出來(lái)push元素的作用,但當(dāng)你頁(yè)面縮放時(shí),如果沒(méi)有push,footer元素就會(huì)和container中的元素重合,之前圖上也有說(shuō)明,那么其具體作用如何呢?
通過(guò)firebug我們選中push的div,可以看到其正好包含著footer元素內(nèi)容,如此將會(huì)阻止footer和container元素重合。
如此,以上關(guān)鍵點(diǎn)就介紹完了,你只要注意以下元素的分布,就可以輕松搞定bootstrap的粘頁(yè)腳效果!
warp
push
有關(guān)本文給大家介紹的Bootstrap 粘頁(yè)腳效果小編就給大家介紹這么多,希望對(duì)大家有所幫助!
相關(guān)文章
微信小程序?qū)崿F(xiàn)頂部選項(xiàng)卡(swiper)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頂部選項(xiàng)卡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08javascript firefox不顯示本地預(yù)覽圖片問(wèn)題的解決方法
在Firefox一直不能用js做出圖片預(yù)覽的效果,下面這個(gè)即可解決,用替換的方法實(shí)現(xiàn)firefox支持得的路徑格式2008-11-11如何利用JavaScript讀取excel文件并繪制echarts圖形
這篇文章主要介紹了如何利用JavaScript讀取excel文件并繪制echarts圖形,文章通過(guò)excel財(cái)務(wù)報(bào)表,并且需要根據(jù)這張excel表繪制成各種echarts圖形,需要了解更多詳情的小伙伴可以參考一下文章內(nèi)內(nèi)容2022-05-05讓Firefox支持event對(duì)象實(shí)現(xiàn)代碼
FireFox并沒(méi)有 window.event ,所以在FireFox下編寫(xiě)事件處理函數(shù)是很麻煩的事。如果要得到 event 對(duì)象,就必須要聲明時(shí)間處理函數(shù)的第一個(gè)參數(shù)為event2009-11-11一些常用的JavaScript函數(shù)(json)附詳細(xì)說(shuō)明
一些常用的JavaScript函數(shù)(json)附詳細(xì)說(shuō)明,學(xué)習(xí)js的朋友可以參考下。2011-05-05基于Three.js實(shí)現(xiàn)360度全景圖片
這篇文章主要為大家詳細(xì)介紹了基于Three.js實(shí)現(xiàn)360度全景圖片,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12