第一種：
永久固定，無視頁面的內容高度，footer一直位於瀏覽器最底部
demo：
//樣式
<style type="text/css">
body {
/* 底欄需要的高度 h */
padding-bottom: h px;
}
.footer {
z-index: 9999;
position: fixed;
bottom: 0px;
width: 100%;
height: h px;
background-color: #aaa;
}
</style>
<body>
<div class="footer">固定在底部</div>
</body>
第二種：
相對固定，頁面內容高度低於瀏覽器高度，footer顯示在瀏覽器底部，不會出現滾動條；如果頁面內容高度高於瀏覽器高度，footer就在內容的最底部，自動出現滾動條；
demo：
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
.footer {
margin-top: -50px;
height: 50px;
background-color: #eee;
z-index: 9999;
}
.wrap {
min-height: 100%;
}
.main {
padding-bottom: 50px;
}
</style>
<body>
<div class="wrap">
<div class="main">
內容
</div>
</div>
<div class="footer">相對在底部</div>
</body>