Posted By

Abiotic on 12/26/12


Tagged

css footer


Versions (?)

CSS Footer


 / Published in: CSS
 

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

This demonstrates one approach to the problem of placing a footer in a position described by Tuttle Grey as follows:

  • render an element at the bottom of the canvas, except...
  • when the page content is shorter than the viewport, render that element at the bottom of the viewport.

See posting to css-discuss

This page should be small enough to demonstrate the second point. For a demo of the first point using the same style, see FooterDemo2. The stylesheet can be found at FooterDemo.css. This has been tested and works in IE5.5+/Win, Moz0.9.9, and Moz1.0. It does not work in Opera 6. Any suggestions for that would be appreciated.

  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.