CSS怎么讓頁腳緊貼頁面底部

這篇文章主要講解了“CSS怎么讓頁腳緊貼頁面底部”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS怎么讓頁腳緊貼頁面底部”吧！

HTML 代碼

下面是 HTML 代碼的基本結構，footer 標簽在 wrap 標簽的外面。

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

頁面內容可以放在 main 標簽的內部。例如，下面是兩列懸浮頁面布局的 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 的外面放一些元素，他們必須使用絕對位置；否則，頁面上計算好的 100% 的高度會被弄亂掉。

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

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

Clearfix Hack to the Rescue

多數 SS designers 對 Clearfix Hack 很熟悉，它解決了很多元素懸浮的問題，在這里，我們用它使得 Google Chrome 里面的頁腳緊貼頁面底部。它同時也解決了兩列懸浮布局所帶來的問題。這樣你就可以把內容放在一列，sidebar 放在另一列，不會出現個別瀏覽器下面 main 里面的懸浮的內容導致頁腳浮上來的情況。 下面的代碼也加入到我們的 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。

需要了解的內容

高度和邊距

Header，wrap 或者 main 標簽內部，如果對一些元素使用 top 或者 bottom margin，可能會出現 footer 被向下移動的現象，移動距離一般是所用的 margin 的高度。這種情況下，可以使用 padding 替代 margin 來填充元素間隙。在頁面內容少的情況下，footer 本來應該在頁面的底部，窗口的滾動條告訴你 footer 在頁面底部偏下的位置。找到那個搗亂的 margin，并用 padding 替換掉。 為 main 聲明padding 的時候要多加小心，如果你添加了這樣的代碼：padding:0    10px 0 10px，你就覆蓋了那個至關重要的本來應該和 footer一樣的 padding。Google Chrome 中，在頁面內容很多的情況下，footer就會和你的頁面內容重疊在一起。

字體的大小

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

感謝各位的閱讀，以上就是“CSS怎么讓頁腳緊貼頁面底部”的內容了，經過本文的學習后，相信大家對CSS怎么讓頁腳緊貼頁面底部這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！