footer贴在底部的布局

http://www.cssstickyfooter.com/

这个网页即使内容很少的情况下，它也始终在页面的底部。否则页面底部将留下大量空白。
footer位置自适应

 

< div  id ="wrap" >
< div  id ="main"  class ="clearfix" >
< div  id ="content" >
ccc
</ div >
< div  id ="side" >
sss
</ div >
</ div >
</ div >
< div  id ="footer" >
fff
</ div >

 

html, body, #wrap  { height :  100% ; }
body > #wrap  { height :  auto ;  min-height :  100% ; }
#main  { padding-bottom :  150px ; }    /*  必须使用和footer相同的高度  */
#footer  { position :  relative ;
margin-top :  -150px ;   /*  footer高度的负值  */
height :  150px ;
background :  #ddd ;
clear :  both ; }

.clearfix:after  { content :  "." ;
display :  block ;
height :  0 ;
clear :  both ;
visibility :  hidden ; }
.clearfix  { display :  inline-block ; }
/*  Hides from IE-mac \ */
* html .clearfix  { height :  1% ; }
.clearfix  { display :  block ; }
/*  End hide from IE-mac  */

 

转载于:https://www.cnblogs.com/css/archive/2009/10/20/1586815.html