Posted By

johnloy on 05/26/09


Tagged

css textmate template layout


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

jfherring
gpenston


Page footer that sticks to viewport bottom unless content is beyond viewport


 / Published in: Other
 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
  4. <head>
  5. <title>How to keep footers at the bottom of the page (CSS demo)</title>
  6. <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  7. <style media="screen" type="text/css">
  8. html,
  9. 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. }
  33. /* other non-essential CSS */
  34. #header p,
  35. #header h1 {
  36. margin:0;
  37. padding:10px 0 0 10px;
  38. }
  39. #footer p {
  40. margin:0;
  41. padding:10px;
  42. }
  43. </style>
  44.  
  45. <!--[if lt IE 7]>
  46. <style media="screen" type="text/css">
  47. #container {
  48. height:100%;
  49. }
  50. </style>
  51. <![endif]-->
  52. </head>
  53. <body>
  54.  
  55. <div id="container">
  56. <div id="header">
  57. <!-- Header start -->
  58. <p><a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page" title="How to keep footers at the page bottom with valid CSS">&laquo; Back to the CSS article</a> by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a></p>
  59.  
  60. <h1>How to keep footers at the bottom of the page (CSS demo)</h1>
  61. <!-- Header end -->
  62. </div>
  63. <div id="body">
  64. <!-- Body start -->
  65. <p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the <a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page">full article</a> for all the details.</p>
  66.  
  67. <!-- Body end -->
  68. </div>
  69. <div id="footer">
  70. <!-- Footer start -->
  71. <p><strong>Footer</strong> (always at the bottom). View more <a href="http://matthewjamestaylor.com/blog/-website-layouts">website layouts</a> and <a href="http://matthewjamestaylor.com/blog/-web-design">web design articles</a>.</p>
  72.  
  73. <!-- Footer end -->
  74. </div>
  75. </div>
  76.  
  77. <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
  78. </script>
  79.  
  80.  
  81.  
  82. </body>
  83. </html>
  84.  

Report this snippet  

You need to login to post a comment.