首先你需要判斷你的footer是固定高度還是任意高度的，因?yàn)槎叩姆椒ㄓ兴鶇s別，
現(xiàn)在先來說情形一，footer高度是固定的。有兩種方法：
方法一：footer高度固定+絕對定位
css樣式
html{height:100%;}
body{min-height:100%;margin:0;padding:0;position:relative;}
.header{background-color: #ffe4c4;}
.main{padding-bottom:100px;background-color: #bdb76b;}/*main的padding-bottom值要等于或大于footer的height*/
.footer{position:absolute;bottom:0;width:100%;height:100px;background-color: #ffc0cb;}? ? ? ??
html代碼
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
方法二：footer高度固定+margin負(fù)值
css樣式
html,body{height:100%;margin:0;padding:0;}
.container{min-height:100%;}
.header{background-color: #ffe4c4;}
.main{padding-bottom:100px;background-color: #bdb76b;}/*main的padding-bottom值要等于或大于footer的height值*/.footer{height:100px;margin-top:-100px;background-color: #ffc0cb;}/*margin-top（負(fù)值的）高度等于footer的height值*/
html代碼
<div class="container">
? ? ?<div class="header"></div>
? ? ?<div class="main"></div>
</div>
<div class="footer"></div>
如果footer高度任意，上面兩種方法就失效了，要用下面的方法
方法三：footer高度任意+js
css樣式
/*動態(tài)為footer添加類fixed-bottom*/.fixed-bottom {position:fixed;bottom:0;width:100%;}
<script type="text/javascript">
$(function(){
function footerPosition(){
$("footer").removeClass(".fixed-bottom");
? ? var contentHeight=document.body.scrollHeight,//網(wǎng)頁正文高度
? ? ? ? ? winHeight=window.innerHeight;// 可是窗口高度，不包括瀏覽器頂部導(dǎo)航欄
if(!(contentHeight>winHeight)){
//當(dāng)網(wǎng)頁正文高度小于可是窗口高度時，為footer添加類fixed-bottom
$("footer").addClass("fixed-bottom");
}else{
$(footer).removeClass("fixed-bottom");
}
}
footerPosition();
$(window).resize(footerPosition);
});
</script>
