让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%,否则将无法随滚动条的滚动而滚动.