Posted By

rogalski on 02/17/11


Tagged

css footer sticky blueprint


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

tootcak
Hepamin
wirenaught


Sticky CSS Footer w/ Blueprint


 / Published in: HTML
 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <head>
  4. <title>Index Page</title>
  5.  
  6. <link href="css/blueprint/blueprint/screen.css" rel="stylesheet" type="text/css" media="screen"/>
  7. <link href="css/blueprint/blueprint/print.css" rel="stylesheet" type="text/css" media="print"/>
  8.  
  9. <!-- style page layout -->
  10. <style type="text/css">
  11. html, body {
  12. height:100%;
  13. }
  14. div.container {
  15. height:100%;
  16. }
  17. div#page-wrapper {
  18. height:100%;
  19. min-height:100%;
  20. }
  21. div.page {
  22. border:1px solid green;
  23. overflow:auto;
  24. padding-bottom:100px;
  25. }
  26. div.page p {
  27. margin:0;
  28. padding:0;
  29. }
  30. div.footer {
  31. position:relative;
  32. margin-top:-100px;
  33. height:100px;
  34. }
  35. </style>
  36. <!-- end style page layout -->
  37.  
  38. <!-- apply colors/backgrounds/etc -->
  39. <style type="text/css">
  40. body {
  41. background-image:url(images/bg1.png);
  42. }
  43. div.footer {
  44. background-color:orange;
  45. }
  46. </style>
  47. <!-- end apply colors/backgrounds/etc -->
  48.  
  49. </head>
  50. <body>
  51. <div class="container showgrid">
  52. <div class="span-24 header">
  53. <p>the header</p>
  54. </div>
  55. <div id="page-wrapper" class="span-25 last">
  56. <div class="span-22 push-1 page">
  57. <p>main page content</p>
  58. </div>
  59. </div>
  60. <div class="span-24 footer last">
  61. <p>the <em>sticky</em> footer</p>
  62. </div>
  63. </div>
  64. </body>
  65. </html>

Report this snippet  

You need to login to post a comment.