CSS Sticky Footer


 / Published in: CSS
 

URL: http://scott.sauyet.com/CSS/Demo/FooterDemo1.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. }

Report this snippet  

You need to login to post a comment.