<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>如何將頁腳固定在頁面的底部</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
<style>
html,body {
margin: 0;
padding:0;
height: 100%;
}
#container {
min-height:100%;
height: auto !important;
height: 100%; /*IE6不識別min-height*/
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#page {
width: 960px;
margin: 0 auto;
padding-bottom: 60px;/*等於footer的高度*/
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;/*腳部的高度*/
background: #6cf;
clear:both;
}
/*=======主體內容部分=======*/
#left {
width: 220px;
float: left;
margin-right: 20px;
background: lime;
}
#content {
background: orange;
float: left;
width: 480px;
margin-right: 20px;
}
#right{
background: green;
float: right;
width: 220px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">Header Title</div>
<div id="page" class="clearfix">
<div id="left">Left Sider</div>
<div id="content">Main Content</div>
<div id="right">Right Sider</div>
</div>
<div id="footer">Footer Section</div>
</div>
</body>
</html>
對於css:
1. reset: 去除html, body的margin, padding. 並且設置height爲100%, 爲的是方便以後子元素設置百分比。
2.我們還需要在div#container容器中設置一個"position:relative"以便於裏面的元素進行絕對定位後不會跑了div#container容器。
3.div#page這個容器有一個很關鍵的設置，需要在這個容器上設置一個padding-bottom值，而且這個值要等於（或略大於）頁腳div#footer的高度（height）值，但有一點需要注意，此處你千萬不能使用margin-bottom來代替padding-bottom，不然會無法實現效果；
4.div#footer容器：div#footer容器必須設置一個固定高度，單位可以是px(或em)。div#footer還需要進行絕對定位，並且設置bottom:0；讓div#footer固定在容器div#container的底部，這樣就可以實現我們前面所說的效果，當內容只有一點時，div#footer固定在屏幕的底部（因爲div#container設置了一個min-height:100%），當內容高度超過屏幕的高度，div#footer也固定在div#container底部，也就是固定在頁面的底部。你也可以給div#footer加設一個"width:100%"，讓他在整個頁面上得到延伸；