Advanced Search

CSS Sticky Footer

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. html, body, #contents {
  2. 	min-height: 100%;
  3. 	width: 100%;
  4. 	height: 100%;
  5. }
  6.  
  7. /*
  8.  * The "height" above is a hack for IE5+/Win.  Below we adjust
  9.  * it using the child selector to hide from IE5+/Win
  10.  */
  11.  
  12. html>body, html>body #contents {
  13. 	height: auto;
  14. }
  15.  
  16. /*
  17.  * Without this, Moz1.0 adds a vertical scrollbar
  18.  */
  19.  
  20. body {
  21. 	margin: 0;
  22. 	font-family: Arial, sans-serif;
  23. }
  24.  
  25. #contents {
  26. 	position: absolute;
  27. 	top: 0;
  28.     left: 0;
  29. /*  Use the following to center this at 50% width, or this for 750px: width: 700px, margin-left: -350px: */
  30. /*
  31. 	left: 50%;
  32.     width: 50%;
  33.     margin-left: -25%;
  34. */
  35. }
  36.  
  37. #footer {
  38. 	position: absolute;
  39. 	bottom: 0;
  40. 	background-color: #ccffcc;
  41. 	width: 70%; /* See note below */
  42. 	text-align: center;
  43. 	padding: 0 15%;
  44. }
  45.  
  46. /* SBMH -- see http://css-discuss.incutio.com/?page=BoxModelHack 
  47.  * Stupid hack lets IE see 100%, others see 70%. 
  48.  */
  49. #footer {
  50.     \width: 100%;
  51.     w\idth: 70%;
  52. }
  53.  
  54. #main {
  55. 	margin-bottom: 5em;
  56. 	height: auto;
  57. 	padding: .5em;
  58. }

URL: http://scott.sauyet.com/CSS/Demo/FooterDemo1.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.