Posted By

m4tik on 02/11/10


Tagged

footer sticky


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

lancemonotone
wirenaught


Sticky Footer


 / Published in: CSS
 

Hacer que el footer este siempre pegado abajo

  1. <div id="wrap">
  2.  
  3. <div id="main" class="clearfix">
  4.  
  5. </div>
  6.  
  7. </div>
  8.  
  9. <div id="footer">
  10.  
  11. </div>
  12.  
  13. * { margin:0; padding:0; }
  14.  
  15. html, body, #wrap { height: 100%; }
  16.  
  17. body > #wrap {height: auto; min-height: 100%;}
  18.  
  19. #main { padding-bottom: 150px; } /* must be same height as the footer */
  20.  
  21. #footer {
  22. position: relative;
  23. margin-top: -150px; /* negative value of footer height */
  24. height: 150px;
  25. clear:both;}
  26.  
  27. /* CLEAR FIX*/
  28. .clearfix:after {content: ".";
  29. display: block;
  30. height: 0;
  31. clear: both;
  32. visibility: hidden;}
  33. .clearfix {display: inline-block;}
  34. /* Hides from IE-mac */
  35. * html .clearfix { height: 1%;}
  36. .clearfix {display: block;}
  37. /* End hide from IE-mac */

Report this snippet  

You need to login to post a comment.