Advanced Search

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

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

Expand | Embed | Plain Text

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. <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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.