亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

讓頁腳緊貼頁面底部的CSS代碼

  發(fā)布時(shí)間：2009-12-17 00:13:34   作者：佚名   我要評論
怎么使用Sticky Footer代碼 介紹 Google一下可以找到很多讓頁腳緊貼頁面底部的方法，我試過其中的很多，但他們總會在某些方面存在一些問題。之所以有這些問題，可能是因?yàn)槌霈F(xiàn)了更新版本的瀏覽器。一些方法因?yàn)樘^久遠(yuǎn)，原本在老版本瀏覽器可以正常工作，卻不
怎么使用Sticky Footer代碼

介紹

Google一下可以找到很多讓頁腳緊貼頁面底部的方法，我試過其中的很多，但他們總會在某些方面存在一些問題。之所以有這些問題，可能是因?yàn)槌霈F(xiàn)了更新版本的瀏覽器。一些方法因?yàn)樘^久遠(yuǎn)，原本在老版本瀏覽器可以正常工作，卻不再適用更新之后的版本。也因?yàn)檫@些頁面太過久遠(yuǎn)，過去曾被大量鏈接過，所以在Google的結(jié)果中排名很高。這樣，一些網(wǎng)站管理員在搜索sticky footer方案的時(shí)候，對搜索出的結(jié)果都很撓頭，因?yàn)榕旁谒阉鹘Y(jié)果前列的方法都有這樣那樣的問題。
眾所周知的是Ryan Fait的方案，它的確工作的很好。但是，它必須要單獨(dú)寫一個(gè)沒有內(nèi)容的div，來提供額外的"push"。對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í)候，頁腳會浮上來。該方案會應(yīng)用一種Clear fix hack方法，把頁腳固定在適當(dāng)?shù)奈恢蒙?，這種方法同時(shí)也解決了頁面布局是兩列或三列懸浮可能會帶來的問題。在超過50種以上的瀏覽器測試中，它都能很好的工作。

HTML 代碼

下面是HTML代碼的基本結(jié)構(gòu)，footer標(biāo)簽在wrap標(biāo)簽的外面。


復(fù)制代碼
代碼如下:

<!--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代碼；

復(fù)制代碼
代碼如下:

<!--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的上面，如下所示；

復(fù)制代碼
代碼如下:

<!--Example Source Code-->
<div id="wrap">
<div id="header">
</div>
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>



如果你需要在wrap或者footer的外面放一些元素，他們必須使用絕對位置；否則，頁面上計(jì)算好的100%的高度會被弄亂掉。

CSS 代碼

下面的CSS代碼使頁腳緊貼在頁面的底部。

復(fù)制代碼
代碼如下:

/*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;}


你會發(fā)現(xiàn)，頁腳的高度在這里被重復(fù)使用了三次，這是至關(guān)重要的，而且三個(gè)高度必須使用同樣的值。wrap的height屬性把自己拉伸至窗口全部高度的尺寸，負(fù)的margin會把footer提高到main的padding的位置上去，因?yàn)閙ain已經(jīng)在wrap的里面，所以main的padding已經(jīng)是wrap 100%高度的一部分。 這樣，footer就留在頁面的底部了。
現(xiàn)在還不算完成，我們還需要去clearfix main。

Clearfix Hack to the Rescue

多數(shù)SS designers對Clearfix Hack很熟悉，它解決了很多元素懸浮的問題，在這里，我們用它使得Google Chrome里面的頁腳緊貼頁面底部。它同時(shí)也解決了兩列懸浮布局所帶來的問題。這樣你就可以把內(nèi)容放在一列，sidebar放在另一列，不會出現(xiàn)個(gè)別瀏覽器下面main里面的懸浮的內(nèi)容導(dǎo)致頁腳浮上來的情況。
下面的代碼也加入到我們的 stylesheet 里面去；

復(fù)制代碼
代碼如下:

/*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)部，如果對一些元素使用top或者bottom margin，可能會出現(xiàn)footer被向下移動的現(xiàn)象，移動距離一般是所用的margin的高度。這種情況下，可以使用padding替代margin來填充元素間隙。在頁面內(nèi)容少的情況下，footer本來應(yī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就會和你的頁面內(nèi)容重疊在一起。

字體的大小

設(shè)置字體大小的時(shí)候，如果你使用相對尺寸，要注意有些訪問者可能會在顯示器配置中使用較大字體。如果footer下面沒有剩余足夠的空間來容納大字體，頁面高度的設(shè)置就會被破壞，從而導(dǎo)致footer下面有多余的空隙。所以，請使用
絕對大小(px)，不要使用pt或者em。

HTML和CSS源文件打包下載

相關(guān)文章

最新評論