快捷導(dǎo)航

Bootstrap 粘頁(yè)腳效果

更新時(shí)間：2016年03月28日 09:58:28 作者：沉默王二

Bootstrap 粘頁(yè)腳，說(shuō)得具體一點(diǎn)就是“將固定高度的頁(yè)腳緊貼頁(yè)面底部”，本文給大家分享具有實(shí)現(xiàn)代碼，感興趣的朋友參考下吧

Bootstrap 粘頁(yè)腳，說(shuō)得具體一點(diǎn)就是“將固定高度的頁(yè)腳緊貼頁(yè)面底部”。由于項(xiàng)目的實(shí)際情況和模板有所區(qū)別，所以參照模板，小編不能確?？焖俚耐瓿伞罢稠?yè)腳”的效果，那么還是要給大家分享本教程，寫(xiě)的不好還請(qǐng)各位大俠海涵！

一、頁(yè)面效果

這里寫(xiě)圖片描述

頁(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 &copy;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ò)亂的）

這里寫(xiě)圖片描述

以上列出的元素自然粘頁(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ō)明，那么其具體作用如何呢？

這里寫(xiě)圖片描述