CSS方法實現DIV固定網頁底部

作者：小龍女 2010-09-10 14:06:47

DIV CSS技術是網頁布局中的主流技術，那么你知道如何把DIV固定在網頁底部嗎，使用CSS方法就可以輕松解決這一問題，這里向大家詳細描述一下。

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

DIV固定在網頁底部的CSS方法

首先看這樣一下問題：“如果有一個footer層，我想讓他固定出現在整個頁面的最下方，不隨著頁面中的內容而變化，CSS中要怎樣設？比如里面是一些版權信息。因為我整頁的內容比較少，footer老跟著內容跑到上面去，很不美觀。”

這個問題如果在以前使用表格布局，并不困難，只要給頁面的最外層表格高度設置為100%就可以了，然而，在Web標準的規范中，表格的高度已經屬于廢止的屬性，應該避免使用，而且使用Web標準以后，也不在提倡使用表格布局了，那么是否有辦法使用CSS來實現頁面的頁腳部分固定在瀏覽器底端呢？

下面就來講解DIV固定在網頁底部的實現方法。

基本思路

首先考慮外層設置一個容器DIV，id設為#container，使他的高度為瀏覽器窗口的高度，然后將#footer這個DIV設置為#container的子DIV，并使用絕對定位的方式，使他固定到#container的底端，以實現希望的把DIV固定在網頁底部效果。

改變瀏覽器的高度和寬度，可以看到Footer部分的效果。

代碼實現

下面先考慮HTML結構，這個演示頁面的HTML代碼非常簡單。

Html程序代碼

<body> 
<DIVidDIVid="container"> 
<DIVidDIVid="content"> 
<h1>Content</h1> 
<p>請改變瀏覽器窗口的高度，以觀察footer效果。</p> 
<p>這里是示例文字，DIV固定………，這里是示例文字。</p> 
</DIV> 
<DIVidDIVid="footer"> 
<h1>Footer</h1> 
</DIV> 
</DIV> 
</body>

CSS代碼：

程序代碼

body,html{  
  margin:0;  
  padding:0;  
  font:12px/1.5arial;  
  height:100%;  
 }  
 #container{  
  min-height:100%;  
  position:relative;  
 }  
 #content{  
  padding:10px;  
  padding-bottom:60px;  
  /*20px(font-size)
x2(line-height)+10px(padding)x2=60px*/  
 }  
 #footer{  
  position:absolute;  
  bottom:0;  
  padding:10px0;  
  background-color:#AAA;  
  width:100%;  
 }  
 #footerh1{  
  font:20px/2Arial;  
  margin:0;  
  padding:010px;  
 }

【編輯推薦】

CSS絕對定位和相對定位的區別
CSS中DIV標簽實現定位單元的控制
CSS中border和clear兩大屬性用法揭秘
實現DIV居中布局三種途徑
解讀DIV CSS網頁布局中CSS無效十個原因

責任編輯：佚名來源： xlnv.net

DIV固定 CSS