這篇文章主要介紹“css實(shí)現(xiàn)將頁腳固定在頁面底部”，在日常操作中，相信很多人在css實(shí)現(xiàn)將頁腳固定在頁面底部問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css實(shí)現(xiàn)將頁腳固定在頁面底部”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
十余年的臺前網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整臺前建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“臺前網(wǎng)站設(shè)計(jì)”,“臺前網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
頁腳的位置問題
網(wǎng)頁的頁腳（footer），也就是通常用來放置幫助鏈接及版權(quán)信息的地方。頁腳自然是應(yīng)該位于頁面底部的，但依照一般的做法，如果位于頁腳之前的網(wǎng)頁內(nèi)容比較少，或者說使用了一個垂直分辨率較大的顯示器，就有可能出現(xiàn)頁腳看起來不在頁面底部的情況，如下圖。
由于頁腳基本上是一個網(wǎng)站的所有頁面公用的部分，不同頁面的內(nèi)容量有所差異，因此確實(shí)有可能某些頁面內(nèi)容不夠而出現(xiàn)這樣的問題。另外，尤其是包含了底色的頁腳，發(fā)生這種問題會很影響美觀。
所以，我們希望頁腳能夠無論網(wǎng)頁內(nèi)容量多少，都準(zhǔn)確地位于底部。
固定頁腳到底部的方法
絕對定位可行嗎？
也許有人想到過把頁腳設(shè)置為position:fixed，然后定位在底部。先不考慮不支持這個屬性值的IE6，從效果上說，如果網(wǎng)頁本身內(nèi)容就很充足，這樣的寫法就會讓頁腳一開始就出現(xiàn)在瀏覽器的底部，而在滾動網(wǎng)頁時，頁腳會一直保持原位置。這樣的效果，顯然對大部分的網(wǎng)站都是不適宜的。
可以想見，我們需要的效果是：
網(wǎng)頁內(nèi)容較多時，在滾動到底部的時候才看到位于最下方的頁腳。
網(wǎng)頁內(nèi)容較少時，頁腳仍然位于整個頁面的最下方，其余部分留白。
常規(guī)、簡單的實(shí)現(xiàn)方法
CSS Sticky Footer提供了這個固定頁腳在底部的合理的實(shí)現(xiàn)方法。不過一方面這是一個英文站點(diǎn)，另一方面它所提供的寫法還存在些許可以改善的地方，所以本文會參考它的內(nèi)容，給出一個合理的實(shí)現(xiàn)方法。
首先需要這樣一個html結(jié)構(gòu)：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
div.wrapper是網(wǎng)頁中除頁腳之外的所有內(nèi)容的外層容器，頁腳div.footer和它位于同一層級。div.footer_placeholder必須放在網(wǎng)頁所有內(nèi)容的最后，即作為div.wrapper的最后一個子元素，它的作用會在后文中說明。
接下來寫css，依次做說明。
CSS Code復(fù)制內(nèi)容到剪貼板
html, body{height:100%;}
當(dāng)網(wǎng)頁內(nèi)容不足的時候，body和html的實(shí)際高度可能小于瀏覽器的可視范圍，因此給body和html寫上高度100%。此外，接下來的直接子元素也會使用百分比的寫法，百分比的寫法必須在直接父元素有確定的高度定義時才有效。
CSS Code復(fù)制內(nèi)容到剪貼板
.wrapper{
min-height:100%;
_height:100%;
margin-bottom:-120px; /*假定頁腳的高度為120px*/
}
所有網(wǎng)頁內(nèi)容都在這個div.wrapper中，定義最小高度（IE6使用hack），由于這個元素的父元素就是定義了100%高度的body，因此無論內(nèi)容多少，div.wrapper這個元素的高度都會占據(jù)整個瀏覽器可視范圍。然后，依照頁腳的高度，設(shè)置相等的下邊距負(fù)值，這樣頁腳就會恰好出現(xiàn)在頁面內(nèi)容的最后。
CSS Code復(fù)制內(nèi)容到剪貼板
.footer, .footer_placeholder{height:120px;} /*假定頁腳的高度為120px*/
div.footer_placeholder，如字面意義，頁腳的占位元素，它只是一個空的div，定義高度和頁腳相同，它的存在是為了給頁腳留下位置。如果沒有它，可能會發(fā)生這樣的事情↓
到這里，固定在底部的頁腳就已經(jīng)實(shí)現(xiàn)了。css部分合起來是：
CSS Code復(fù)制內(nèi)容到剪貼板
html, body{height:100%;}
.wrapper{
min-height:100%;
_height:100%;
margin-bottom:-120px; /*假定頁腳的高度為120px*/
}
.footer, .footer_placeholder{height:120px;}
如果還需要考慮css初始化和清理浮動，可能你還需要添加下面這部分css：
body{margin:0;}
.footer_placeholder{clear:both;}
到此，關(guān)于“css實(shí)現(xiàn)將頁腳固定在頁面底部”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
重慶分公司
重慶分公司
