讓footer始終位于頁面的最底部不隨滾動(dòng)而滾動(dòng)
發(fā)布時(shí)間：2014-07-28 16:26:14 作者：佚名 
我要評論
我要評論本節(jié)主要介紹了如何讓footer始終位于頁面的最底部不隨滾動(dòng)而滾動(dòng)，此效果在網(wǎng)頁中非常實(shí)用，建議大家好好學(xué)習(xí)哦
html代碼：
<div class="container">
<div cass="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
第一種情況：footer隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
.container{position:relative;width:100%;min-height:100%;}
.body{padding-bottom:50px;}
.footer{height:50px;position:absolute;bottom:0px;left:0px;}
第二種情況:footer始終在其底部固定
.container{position:relative;width:100%;min-height:100%;}
.body{padding-bottom:50px;}
.footer{height:50px;position:fixed;bottom:0px;left:0px;}
注意：
1.千萬不能設(shè)置.container的高度為100%,否則將無法隨滾動(dòng)條的滾動(dòng)而滾動(dòng).
復(fù)制代碼
代碼如下:<div class="container">
<div cass="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
第一種情況：footer隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
復(fù)制代碼
代碼如下:.container{position:relative;width:100%;min-height:100%;}
.body{padding-bottom:50px;}
.footer{height:50px;position:absolute;bottom:0px;left:0px;}
第二種情況:footer始終在其底部固定
復(fù)制代碼
代碼如下:.container{position:relative;width:100%;min-height:100%;}
.body{padding-bottom:50px;}
.footer{height:50px;position:fixed;bottom:0px;left:0px;}
注意：
1.千萬不能設(shè)置.container的高度為100%,否則將無法隨滾動(dòng)條的滾動(dòng)而滾動(dòng).
相關(guān)文章
html的footer置于頁面最底部的簡單實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猦tml的footer置于頁面最底部的簡單實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-13移動(dòng)端解決懸浮層（懸浮header、footer）會(huì)遮擋住內(nèi)容的3種方法
這篇文章主要介紹了移動(dòng)端解決懸浮層（懸浮header、footer）會(huì)遮擋住內(nèi)容的3種方法,本文講解如何解決移動(dòng)端懸浮層會(huì)遮擋住內(nèi)容的3種方法,需要的朋友可以參考下2015-03-27純css 實(shí)現(xiàn)footer 一直在頁面底部，不隨頁面滾動(dòng)
CSS的簡單在于它易學(xué)，CSS的困難在于尋找更好的解決方案。在CSS的世界里，似乎沒有完美這種說法。所以，現(xiàn)在介紹的CSS絕對底部，只是目前個(gè)人見過的方案中比較完美的吧。2014-09-02div footer標(biāo)簽css實(shí)現(xiàn)位于頁面底部固定
Web頁面的“footer”部分隨著飄上來，處在頁面的半腰中間，給視覺效果帶來極大的影響，讓你的頁面看上去很不好看，特別是現(xiàn)在寬屏越來越多，這種現(xiàn)象更是常見,本文將介紹兩2012-12-02- 這個(gè)網(wǎng)頁即使內(nèi)容很少的情況下，它也始終在頁面的底部。否則頁面底部將留下大量空白。2009-10-20
- 下面小編就為大家?guī)硪黄肅SS使footer固定在頁面底部的實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-13