Posted By

hoogvlieger on 07/20/11


Tagged


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Josueriv


Footer at bottom


 / Published in: HTML
 

  1. <div id="container">
  2. <div id="header"></div>
  3. <div id="body"></div>
  4. <div id="footer"></div>
  5. </div>
  6.  
  7. =========================================================================
  8.  
  9. html, body
  10. {
  11. margin:0;
  12. padding:0;
  13. height:100%;
  14. }
  15.  
  16. #container
  17. {
  18. min-height:100%;
  19. position:relative;
  20. }
  21.  
  22. #header
  23. {
  24. background:#ff0;
  25. padding:10px;
  26. }
  27.  
  28. #body
  29. {
  30. padding:10px;
  31. padding-bottom:60px; /* Height of the footer */
  32. }
  33.  
  34. #footer
  35. {
  36. position:absolute;
  37. bottom:0;
  38. width:100%;
  39. height:60px; /* Height of the footer */
  40. background:#6cf;
  41. }
  42.  
  43. And one simple CSS rule for IE 6 and 5.5: !!! conditioneel
  44.  
  45. #container
  46. {
  47. height:100%;
  48. }

Report this snippet  

You need to login to post a comment.