pianoman pianoman - 2 months ago 5x
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

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?


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 {}