让footer始终位于页面的最底部

html代码：

< div  class ="container" >
< div cass ="header" ></ div >

 

< div  class ="body" ></ div >

< div  class ="footer" ></ div >
</ div >

 

第一种情况：footer随着滚动条的滚动而滚动

.container{ position: relative;width:100%;min-height:100%;}
.body{ padding-bottom: 50px;}
.footer{ height: 50px; position: absolute; bottom: 0px; left: 0px;}

 

第二种情况:footer始终在其底部固定

.container{position:relative;width:100%;min-height:100%;}

.body{ padding-bottom: 50px;}
.footer{ height: 50px; position: fixed; bottom: 0px; left: 0px;}

 

 注意：

1.千万不能设置.container的高度为100%,否则将无法随滚动条的滚动而滚动.

转载于:https://www.cnblogs.com/wudingfeng/archive/2012/06/29/2569997.html