本文向大家描述一下如何使用CSS方式實(shí)現(xiàn)DIV固定在網(wǎng)頁(yè)底部，這個(gè)問(wèn)題如果在以前使用表格布局，并不困難，只要給頁(yè)面的最外層表格高度設(shè)置為100%就可以了，然而，在Web標(biāo)準(zhǔn)的規(guī)范中，表格的高度已經(jīng)屬于廢止的屬性，應(yīng)該避免使用，所以使用CSS方法才是明智的選擇。

DIV固定在網(wǎng)頁(yè)底部的CSS方法

首先看這樣一下問(wèn)題：“如果有一個(gè)footer層，我想讓他固定出現(xiàn)在整個(gè)頁(yè)面的最下方，不隨著頁(yè)面中的內(nèi)容而變化，CSS中要怎樣設(shè)？比如里面是一些版權(quán)信息。因?yàn)槲艺?yè)的內(nèi)容比較少，footer老跟著內(nèi)容跑到上面去，很不美觀。”

這個(gè)問(wèn)題如果在以前使用表格布局，并不困難，只要給頁(yè)面的最外層表格高度設(shè)置為100%就可以了，然而，在Web標(biāo)準(zhǔn)的規(guī)范中，表格的高度已經(jīng)屬于廢止的屬性，應(yīng)該避免使用，而且使用Web標(biāo)準(zhǔn)以后，也不在提倡使用表格布局了，那么是否有辦法使用CSS來(lái)實(shí)現(xiàn)頁(yè)面的頁(yè)腳部分固定在瀏覽器底端呢？

下面就來(lái)講解DIV固定在網(wǎng)頁(yè)底部的實(shí)現(xiàn)方法。

基本思路

首先考慮外層設(shè)置一個(gè)容器DIV，id設(shè)為#container，使他的高度為瀏覽器窗口的高度，然后將#footer這個(gè)DIV設(shè)置為#container的子DIV，并使用絕對(duì)定位的方式，使他固定到#container的底端，以實(shí)現(xiàn)希望的把DIV固定在網(wǎng)頁(yè)底部效果。

改變?yōu)g覽器的高度和寬度，可以看到Footer部分的效果。

代碼實(shí)現(xiàn)

下面先考慮HTML結(jié)構(gòu)，這個(gè)演示頁(yè)面的HTML代碼非常簡(jiǎn)單。

Html程序代碼

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
Content
 
  
  
  
請(qǐng)改變?yōu)g覽器窗口的高度，以觀察footer效果。
 
  
  
  
這里是示例文字，DIV固定………，這里是示例文字。