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


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



Copy this code and paste it in your HTML
  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. <title>How to keep footers at the bottom of the page (CSS demo)</title>
  5. <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  6. <style media="screen" type="text/css">
  7. html,
  8. body {
  9. margin:0;
  10. padding:0;
  11. height:100%;
  12. }
  13. #container {
  14. min-height:100%;
  15. position:relative;
  16. }
  17. #header {
  18. background:#ff0;
  19. padding:10px;
  20. }
  21. #body {
  22. padding:10px;
  23. padding-bottom:60px; /* Height of the footer */
  24. }
  25. #footer {
  26. position:absolute;
  27. bottom:0;
  28. width:100%;
  29. height:60px; /* Height of the footer */
  30. background:#6cf;
  31. }
  32. /* other non-essential CSS */
  33. #header p,
  34. #header h1 {
  35. margin:0;
  36. padding:10px 0 0 10px;
  37. }
  38. #footer p {
  39. margin:0;
  40. padding:10px;
  41. }
  42. </style>
  43.  
  44. <!--[if lt IE 7]>
  45. <style media="screen" type="text/css">
  46. #container {
  47. height:100%;
  48. }
  49. </style>
  50. <![endif]-->
  51. </head>
  52.  
  53. <div id="container">
  54. <div id="header">
  55. <!-- Header start -->
  56. <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>
  57.  
  58. <h1>How to keep footers at the bottom of the page (CSS demo)</h1>
  59. <!-- Header end -->
  60. </div>
  61. <div id="body">
  62. <!-- Body start -->
  63. <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>
  64.  
  65. <!-- Body end -->
  66. </div>
  67. <div id="footer">
  68. <!-- Footer start -->
  69. <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>
  70.  
  71. <!-- Footer end -->
  72. </div>
  73. </div>
  74.  
  75. <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
  76.  
  77.  
  78.  
  79. </body>
  80. </html>
  81.  

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.