100% height, keep the footer at the bottom


/ Published in: CSS
Save to your folder(s)

Keep the "footer" always at the bottom of the page, with 100% height


Copy this code and paste it in your HTML
  1. <!-- The HTML -->
  2. <div id="container">
  3. <div id="header"></div>
  4. <div id="body"></div>
  5. <div id="footer"></div>
  6. </div>
  7.  
  8. /*** The CSS ***/
  9. html,body {
  10. margin:0;
  11. padding:0;
  12. height:100%;
  13. }
  14. #container {
  15. min-height:100%;
  16. position:relative;
  17. }
  18. #header {
  19. background:#ff0;
  20. padding:10px;
  21. }
  22. #body {
  23. padding:10px;
  24. padding-bottom:60px; /* Height of the footer */
  25. }
  26. #footer {
  27. position:absolute;
  28. bottom:0;
  29. width:100%;
  30. height:60px; /* Height of the footer */
  31. background:#6cf;
  32. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.