免費(fèi)AI編程助手
怎么使用 Sticky Footer 代碼
介紹
Google 一下可以找到很多讓頁腳緊貼頁面底部的方法，我試過其中的很多，但他們總會(huì)在某些方面存在一些問題。之所以有這些問題，可能是因?yàn)槌霈F(xiàn)了更新版本的瀏覽器。一些方法因?yàn)樘^久遠(yuǎn)，原本在老版本瀏覽器可以正常工作，卻不再適用更新之后的版本。也因?yàn)檫@些頁面太過久遠(yuǎn)，過去曾被大量鏈接過，所以在Google 的結(jié)果中排名很高。這樣，一些網(wǎng)站管理員在搜索 sticky footer 方案的時(shí)候，對(duì)搜索出的結(jié)果都很撓頭，因?yàn)榕旁谒阉鹘Y(jié)果前列的方法都有這樣那樣的問題。 眾所周知的是 Ryan Fait 的方案，它的確工作的很好。但是，它必須要單獨(dú)寫一個(gè)沒有內(nèi)容的 div，來提供額外的"push"。對(duì) HTML 語義要求嚴(yán)格的人可以說代碼這么寫是不符合規(guī)范的，我們的方案不用附加的div。 將要介紹的 Sticky Footer 方案是建立在 Exploring Footers article from A List Apart 成果的基礎(chǔ)上，并受到 Cameron Adams 和 this piece at lwis.net 工作的啟發(fā)。在 Google Chrome 和其他瀏覽器中，當(dāng)你縮放窗口的時(shí)候，頁腳會(huì)浮上來。該方案會(huì)應(yīng)用一種 Clear fix hack 方法，把頁腳固定在適當(dāng)?shù)奈恢蒙希@種方法同時(shí)也解決了頁面布局是兩列或三列懸浮可能會(huì)帶來的問題。在超過 50 種以上的瀏覽器測(cè)試中，它都能很好的工作。
HTML 代碼
下面是 HTML 代碼的基本結(jié)構(gòu)，footer 標(biāo)簽在 wrap 標(biāo)簽的外面。
<!--Example Source Code-->
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
??
頁面內(nèi)容可以放在 main 標(biāo)簽的內(nèi)部。例如，下面是兩列懸浮頁面布局的 HTML 代碼；
<!--Example Source Code-->
<div id="wrap">
<div id="main" class="clearfix">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>
??
Header放在wrap的里面，main的上面，如下所示；
<!--Example Source Code-->
<div id="wrap">
<div id="header">
</div>
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
?如果你需要在 wrap 或者 footer 的外面放一些元素，他們必須使用絕對(duì)位置；否則，頁面上計(jì)算好的 100% 的高度會(huì)被弄亂掉。
CSS 代碼
下面的 CSS 代碼使頁腳緊貼在頁面的底部。
/Example Source Code/
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* must be same height as the footer /
#footer {position: relative;
margin-top: -150px; / negative value of footer height */
height: 150px;
clear:both;}
你會(huì)發(fā)現(xiàn)，頁腳的高度在這里被重復(fù)使用了三次，這是至關(guān)重要的，而且三個(gè)高度必須使用同樣的值。wrap 的 height 屬性把自己拉伸至窗口全部高度的尺寸，負(fù)的 margin 會(huì)把 footer 提高到 main 的 padding 的位置上去，因?yàn)?main 已經(jīng)在 wrap 的里面，所以 main 的 padding 已經(jīng)是 wrap 100% 高度的一部分。 這樣，footer 就留在頁面的底部了。 現(xiàn)在還不算完成，我們還需要去 clearfix main。
Clearfix Hack to the Rescue
多數(shù) SS designers 對(duì) Clearfix Hack 很熟悉，它解決了很多元素懸浮的問題，在這里，我們用它使得 Google Chrome 里面的頁腳緊貼頁面底部。它同時(shí)也解決了兩列懸浮布局所帶來的問題。這樣你就可以把內(nèi)容放在一列，sidebar 放在另一列，不會(huì)出現(xiàn)個(gè)別瀏覽器下面 main 里面的懸浮的內(nèi)容導(dǎo)致頁腳浮上來的情況。 下面的代碼也加入到我們的 stylesheet 里面去；
/Example Source Code/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
*html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
如果你比較喜歡 Ryan Fait 的方法，添加額外的 push，在多列懸浮的頁面中，同樣需要用到 clearfix。
需要了解的內(nèi)容
高度和邊距
Header，wrap 或者 main 標(biāo)簽內(nèi)部，如果對(duì)一些元素使用 top 或者 bottom margin，可能會(huì)出現(xiàn) footer 被向下移動(dòng)的現(xiàn)象，移動(dòng)距離一般是所用的 margin 的高度。這種情況下，可以使用 padding 替代 margin 來填充元素間隙。在頁面內(nèi)容少的情況下，footer 本來應(yīng)該在頁面的底部，窗口的滾動(dòng)條告訴你 footer 在頁面底部偏下的位置。找到那個(gè)搗亂的 margin，并用 padding 替換掉。 為 main 聲明padding 的時(shí)候要多加小心，如果你添加了這樣的代碼：padding:0 10px 0 10px，你就覆蓋了那個(gè)至關(guān)重要的本來應(yīng)該和 footer一樣的 padding。Google Chrome 中，在頁面內(nèi)容很多的情況下，footer就會(huì)和你的頁面內(nèi)容重疊在一起。
字體的大小
設(shè)置字體大小的時(shí)候，如果你使用相對(duì)尺寸，要注意有些訪問者可能會(huì)在顯示器配置中使用較大字體。如果 footer 下面沒有剩余足夠的空間來容納大字體，頁面高度的設(shè)置就會(huì)被破壞，從而導(dǎo)致 footer 下面有多余的空隙。所以，請(qǐng)使用 絕對(duì)大小(px)，不要使用pt或者 em。
