Advanced Search

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

Expand | Embed | Plain Text

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.