html footer 固定

让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;}