pianoman pianoman - 3 months ago 13
CSS Question

How to Stop Sticky Footer at Content DIV

I've been tweaking my sticky footer in hopes of stopping it once it hits the

#body
div, but so far, I've been unsuccessful. In most cases, it doesn't usually cover the content, but on this page, it often does.

I would like to keep it stuck to the bottom of the window, if possible, but the only other solution I've been able to come up with is a fixed position. Any suggestions?

Answer

Well, you can apply a fixed position/sticky footer in a number of ways. One option is using only CSS, as Twitter Bootstraps Sticky Footer example. That is probably the simplest implementation.

  /* The html and body elements cannot have any padding or margin. */
  html,body { height: 100%; }

  /* Wrapper for page content to push down footer */
  #wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* Negative indent footer by it's height */
  }

  /* Set the fixed height of the footer here */
  #push,#footer{ height:100px }
  #footer {}
Comments