讓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%,否則將無法隨滾動條的滾動而滾動.