htmlcssfooterzen

Footer not 'always' sticking to the bottom

The footer of this web page I'm working on is sticking to the bottom on most pages, except when the content is larger than it's "supposed to be".

A faulty page is: * A good page is: *

I tried multiple methods of sticking the footer at the bottom, all with different results.

This is the Zen starterkit-template from Drupal 7.x.

Solution

  • The problem is not with the footer. You have this CSS that forces a height of 1100px on the #wrapper and #subwrapper elements, which is why it seems like there's something "below" the footer.

    #wrapper{
  position: absolute;
  left: 0px;
  top: 240px;
  width: 100%;
  height: 1100px; /* This is making the page longer than it should be.*/
  background: #85bb99;
  z-index: -5;
}

#wrapper #subwrapper {
  background: url('/themeimages/pattern-cutout.png');
  opacity: 0.2;
  width: 100%;
  height: 1100px; /* Same thing here */
}

    It looks like you're using these elements as a background image. You can fix it by trying this CSS instead: 

    #wrapper{
  position: fixed; /* Use fixed positioning so it'll always be displayed */
  left: 0px;
  width: 100%;
  height: 100%; /* Set a height of 100% */
  background: #85bb99;
  z-index: -5;
}

#wrapper #subwrapper {
  background: url('/themeimages/pattern-cutout.png');
  opacity: 0.2;
  width: 100%;
  height: 100%; /* Set a height of 100% */
}